首页 1 2 3 4 5 6 7

php html5多图上传

多图上传功能在如今的网站开发中变得越来越常见。其中，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: "=$file?>", name: "=basename($file)?>" }); </script>
<?php } ?>
</body>
</html>

总结通过以上介绍，我们可以看到多图上传的实现方法并不复杂。通过结合HTML5与PHP技术，我们可以轻松地为自己的网站添加多图上传功能。我们也可以在此基础上，根据自己的需求，进行二次开发，为我们的网站注入更多的创意与灵活性。