下面我将为您详细讲解“PHP+Ajax+JS实现多图上传”的完整攻略。
总体思路
实现多图上传，我们需要通过Ajax技术将多张图片逐一传递到服务器端，再通过PHP将图片保存到指定目录中。下面是详细的步骤：
- 使用HMTL5的file类型的input框架，在客户端实现图片上传。
- 使用JavaScript遍历的方式，依次将图片上传到服务器端。
- JavaScript调用Ajax技术，将图片文件传递给服务器端。
- 服务器端接收Ajax传递过来的图片文件并保存到指定目录。
- 将上传结果以JSON格式返回给客户端。
示例1
以下是一个简单但完整的多图上传示例，前端使用原生HTML5+JS，后端使用PHP实现。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图上传示例</title>
</head>
<body>
<input type="file" id="file" name="file" multiple>
<button type="button" onclick="upload()">上传</button>
<div id="result"></div>
<script>
function upload() {
var files = document.getElementById('file').files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file[]', files[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText);
var div = document.getElementById('result');
div.innerHTML = '';
for (var i = 0; i < result.length; i++) {
div.innerHTML += '<img src="' + result[i] + '">';
}
}
};
xhr.open('POST', 'upload.php');
xhr.send(formData);
}
</script>
</body>
</html>
后端代码：
<?php
$allowedExts = array('jpg', 'jpeg', 'gif', 'png');
$uploadDir = 'uploads/';
$uploadedFiles = array();
foreach ($_FILES['file']['name'] as $key => $name) {
$tmp_name = $_FILES['file']['tmp_name'][$key];
$extension = substr($name, strrpos($name, '.') + 1);
if (!in_array($extension, $allowedExts)) {
continue;
}
$filePath = $uploadDir . uniqid() . '.' . $extension;
if (move_uploaded_file($tmp_name, $filePath)) {
array_push($uploadedFiles, $filePath);
}
}
echo json_encode($uploadedFiles);
?>
示例2
下面是使用jQuery实现的多图上传示例。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图上传示例</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="file" id="file" name="file" multiple>
<button type="button" onclick="upload()">上传</button>
<div id="result"></div>
<script>
function upload() {
var formData = new FormData();
$('input[type=file]').each(function() {
var files = this.files;
for (var i = 0; i < files.length; i++) {
formData.append('file[]', files[i]);
}
});
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function(result) {
var div = $('#result');
div.empty();
for (var i = 0; i < result.length; i++) {
div.append('<img src="' + result[i] + '">');
}
}
});
}
</script>
</body>
</html>
后端代码和示例1相同。
希望这份攻略能对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：PHP+Ajax+JS实现多图上传 - Python技术站
微信扫一扫 
支付宝扫一扫 