QuickUploadjs插件修改成可以上传多文件
要将QuickUpload.js插件修改为可以上传多个文件,需要进行以下步骤:
- 在HTML文件中,添加一个多文件上传的input标签,例如:
<input type="file" id="multi-file" multiple>
- 修改QuickUpload.js插件的代码,使其能够处理多个文件的上传。在上传按钮的点击事件中,获取多文件上传的input元素,并遍历其中的文件,逐个进行上传。可以使用FileReader对象来读取文件内容,然后使用XMLHttpRequest对象发送文件到服务器。
// 上传按钮点击事件
document.getElementById('upload-button').addEventListener('click', function() {
var fileInput = document.getElementById('multi-file');
var files = fileInput.files;
// 遍历上传文件
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
// 读取文件内容
reader.onload = function(e) {
var fileData = e.target.result;
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open('POST', 'upload.php', true);
// 设置请求头
xhr.setRequestHeader('Content-type', 'application/octet-stream');
// 监听上传进度
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
console.log('Upload progress: ' + percent + '%');
}
};
// 监听上传完成事件
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Upload complete!');
} else {
console.log('Upload failed!');
}
};
// 发送文件数据
xhr.send(fileData);
};
// 读取文件内容
reader.readAsDataURL(file);
}
});
- 在服务器端的upload.php文件中,处理接收到的文件数据。可以使用$_FILES全局变量来获取上传的文件信息,然后将文件保存到服务器指定的目录中。
<?php
// 处理上传文件
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = 'uploads/';
$targetFile = $targetPath . $_FILES['file']['name'];
// 将文件移动到指定目录
move_uploaded_file($tempFile, $targetFile);
echo 'Upload successful!';
} else {
echo 'Upload failed!';
}
?>
以上就是将QuickUpload.js插件修改为可以上传多个文件的步骤。请注意,修改插件代码时要根据实际情况调整相关的URL和文件保存路径
原文地址: https://www.cveoy.top/t/topic/hXrW 著作权归作者所有。请勿转载和采集!