QuickUploadjs插件修改成可以传递多个文件到后端
要将QuickUpload.js插件修改为可以传递多个文件到后端,你需要进行以下步骤:
- 首先,在前端HTML页面中添加一个多文件上传的input标签,如下所示:
<input type="file" id="multi-upload" multiple>
<button onclick="uploadFiles()">Upload Files</button>
- 在QuickUpload.js文件中,修改
uploadFile函数,以支持多文件上传。你可以使用FormData对象来处理多个文件。修改后的函数如下所示:
function uploadFiles() {
var files = document.getElementById('multi-upload').files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file' + i, files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
// 文件上传成功
console.log('Files uploaded successfully.');
} else {
// 文件上传失败
console.log('Error uploading files.');
}
};
xhr.send(formData);
}
- 在后端的PHP文件(例如upload.php)中,修改处理文件的逻辑,以处理多个文件。你可以使用
$_FILES数组来获取上传的文件。修改后的PHP代码如下所示:
<?php
$uploadDir = 'uploads/';
for ($i = 0; $i < count($_FILES); $i++) {
$file = $_FILES['file' . $i];
$tempFilePath = $file['tmp_name'];
$fileName = $file['name'];
$uploadPath = $uploadDir . $fileName;
move_uploaded_file($tempFilePath, $uploadPath);
}
// 文件上传完成
echo 'Files uploaded successfully.';
?>
以上就是将QuickUpload.js插件修改为可以传递多个文件到后端的步骤。记得将相应的文件路径和上传目录根据你的实际情况进行修改
原文地址: https://www.cveoy.top/t/topic/hXr2 著作权归作者所有。请勿转载和采集!