多圖上傳功能在如今的網站開發中變得越來越常見。其中，PHP與HTML5技術的結合，更是讓這一功能的實現變得方便可靠。本文將為您詳細介紹PHP與HTML5多圖上傳實現的方法，以及幾個常見的實例。
一、HTML5上傳文件
HTML5中提供了一個新的input類型：file。此類型的input可以接收并處理文件類型的數據。我們可以通過設置input的multiple屬性來支持多文件上傳，同時通過accept屬性設置上傳文件的類型。以下代碼是實現HTML5多圖上傳的代碼片段：
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple accept="image/*"> <button type="submit">上傳</button> </form>二、PHP進行文件處理 PHP中有一個超級全局數組$_FILES，可以獲取到上傳的文件信息。以下代碼是一個常見的多圖上傳實現的代碼片段：
<?php
$files = $_FILES['file'];
foreach ($files["name"] as $key =>$name) {
if ($files["error"][$key] === UPLOAD_ERR_OK) {
move_uploaded_file($files["tmp_name"][$key], "upload/".$name);
}
}
?>以上代碼通過遍歷$_FILES數組中的每一個文件，實現了將文件上傳至指定路徑的功能。
三、多種上傳方式
1. 實現加載完成后無需刷新頁面上傳圖片
實例代碼：<!doctype html>
<html>
<head>
<title>多圖上傳</title>
<script>
window.onload = function() {
var xhr = new XMLHttpRequest();
var form = document.getElementById("upload");
form.addEventListener("submit", function(e) {
e.preventDefault();
xhr.open("post", "upload.php", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send(new FormData(form));
});
};
</script>
</head>
<body>
<form id="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple accept="image/*">
<button type="submit">上傳</button>
</form>
</body>
</html>2. 實現添加和刪除已經上傳的圖片的功能
實例代碼：<!doctype html>
<html>
<head>
<title>多圖上傳</title>
<script>
window.onload = function() {
var xhr = new XMLHttpRequest();
var form = document.getElementById("upload");
form.addEventListener("submit", function(e) {
e.preventDefault();
xhr.open("post", "upload.php", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send(new FormData(form));
});
var images = document.getElementById("images");
images.addEventListener("click", function(e) {
if (e.target.classList.contains("remove")) {
var file = document.querySelector('input[name="file[]"][value="' + e.target.dataset.target + '"]');
file.parentNode.removeChild(file);
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}
});
};
</script>
</head>
<body>
<form id="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple accept="image/*">
<button type="submit">上傳</button>
</form>
<div id="images"></div>
<script>
function addImage(data) {
var div = document.createElement('div');
div.classList.add("image");
var img = document.createElement('img');
img.src = data.url;
div.appendChild(img);
var input = document.createElement('input');
input.type = "hidden";
input.name = "file[]";
input.value = data.name;
div.appendChild(input);
var remove = document.createElement('button');
remove.classList.add("remove");
remove.innerText = "移除";
remove.dataset.target = data.name;
div.appendChild(remove);
document.getElementById("images").appendChild(div);
}
</script>
<?php foreach (glob("upload/*") as $file) { ?>
<script> addImage({ url: "", name: "" }); </script>
<?php } ?>
</body>
</html>總結
通過以上介紹，我們可以看到多圖上傳的實現方法并不復雜。通過結合HTML5與PHP技術，我們可以輕松地為自己的網站添加多圖上傳功能。我們也可以在此基礎上，根據自己的需求，進行二次開發，為我們的網站注入更多的創意與靈活性。