jquery $ .each中断了FormData追加

Question

所以我正在尝试创建一个drag'n'drop文件上传器，我已经到了文件上传到服务器的地步。我正在使用jQuery和FormData对象来表示请求，并$.ajax发送它。我现在遇到一个问题，如果我迭代我的files数组，在php端将不会收到任何内容，但如果我将每个文件硬附加到filesData FormData对象中， php方面将确认收到文件。我在这里做错了吗？

    $("#upload-panel").on("drop", function(event) {
      event.preventDefault();
      event.stopPropagation();
      //files is now simply an array of file objects
      var files = event.originalEvent.dataTransfer.files; 

      var filesData = new FormData();

      // this doesn't work
      $.each(files, function(key, value) {
        filesData.append(key, files[key]);
        console.log(key);
        console.log(files[key]);
      });

      // this does
      filesData.append(0, files[0]);
      filesData.append(1, files[1]);
      // repeat for as many files.

      $.ajax({
        type: "POST",
        url: "file-processor.php",
        data: filesData,
        processData: false,
        contentType: false,
        cache: false,
        success: function(data, text, xhr) {
          console.log(data);
          console.log(text);
          console.log(xhr);
        },
        error: function (xhr, textStatus, err) {
          $("#results").html += err;
        }
      });
    }

file-processor.php：print_r($_FILES);

files变量：

Answer 1

您可以尝试常规for loop方法，这同样简单方便。它将完全符合您的工作代码。

  for (var i = 0, len = files.length; i < len; i++) 
    filesData.append(i, files[i]);