要将QuickUpload.js插件修改为可以上传多个文件,需要进行以下步骤:

  1. 在HTML文件中,添加一个多文件上传的input标签,例如:
<input type="file" id="multi-file" multiple>
  1. 修改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);
  }
});
  1. 在服务器端的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和文件保存路径

QuickUploadjs插件修改成可以上传多文件

原文地址: https://www.cveoy.top/t/topic/hXrW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录