文件API，上传文件数组

Question

我正在尝试检测重复项，让用户能够通过从我推送到的数组中删除文件来从上传中删除文件 window。现在我无法上传最终文件列表。我认为我的数组没有实际的文件数据。

以下是我构建文件数组的方式：

var masterList = [];

function drop(evt) {
   evt.stopPropagation()
   evt.preventDefault();
   var fileList = evt.dataTransfer.files; //Getting the file(s)
   buildList(fileList); //Passing the file(s)
}

function buildList(fileList) {
   //Detect duplicates by comparing incoming filenames and current list
   var currentNames = _.pluck(masterList, 'name');
   $.each(fileList, function(i, file) {
      if ($.inArray(file.name, currentNames) == -1) {
         masterList.push(file);
         //is this pushing the file or have I lost the file handle              } else {}
   });
  }

查看masterList中的对象时，显示：

File { name: "Logo.pdf", 
     lastModified: 1429803494000, 
     lastModifiedDate: Date 2015-04-23T15:38:14.000Z, 
     size: 1511129,
     type: "application/pdf"
   }

这是上传功能。上传中的每个文件 window 都有自己的进度条。:

function startUpload() {
     if (masterList.length > 0) {
        var finished = 0;
        $.each(masterList, function(i, file) {
              console.log(file); //Output above
              var data = new FormData();
              data.append('file', file); //<- This is not allowed
              //Start Upload
              $.ajax({
                    xhr: function() {
                       var xhr = new window.XMLHttpRequest();
                       //Upload progress
                       xhr.upload.addEventListener("progress", function(evt) {
                          if (evt.lengthComputable) {
                             var percentComplete = evt.loaded / evt.total;
                             console.log(percentComplete);
                          }
                       }, false);
                       return xhr;
                    },
                    type: 'POST',
                    url: 'uploader.php',
                    data: data,
                    success: function(data) {
                       //Do something successful
                    }
                 }
              });

        });
     }
  }

目前我无法将文件放入我创建的 FormData 中，我也不确定这是将最终组发送到服务器的最佳方式。

Answer 1

我猜要将 FormData 与 jQuery 的 XHR 一起使用，您必须告诉它不要处理数据，即：

$.ajax({
  data: formData,
  processData: false,
  contentType: false
  ...
});

文件API，上传文件数组

File API, upload array of files

html

javascript

fileapi

html5-filesystem