File API，上传文件数组答案

【问题标题】：File API, upload array of filesFile API，上传文件数组
【发布时间】：2015-11-19 01:39:31
【问题描述】：

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

这是我构建文件数组的方法：

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"
   }

这就是上传功能。上传窗口中的每个文件都有自己的进度条。：

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 中，我也不确定这是将最终组发送到服务器的最佳方式。

【问题讨论】：

尝试简化代码，并指定您的确切问题。您是否在发送请求之前尝试检查 data 并没有在此处看到文件，或者您无法在服务器上收到文件？
为了清晰起见清理了代码。我无法将文件列表添加到要上传的表单数据中。在$.each() 语句中输出上述文件对象后，它立即失败。

标签： javascript html fileapi html5-filesystem

【解决方案1】：

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

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

【讨论】：

这成功了！对于未来的访问者，以上将成功地从列表中添加和删除文件，然后上传。