javascript - jquery $.each 中断 FormData 附加

Question

所以我正在尝试创建一个拖放文件 uploader ，并且我已经将文件上传到服务器了。我使用 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;
        }
      });
    }

文件处理器.php:print_r($_FILES);

文件变量:

Answer 1

您可以尝试常规的for循环方法，这同样简单方便。它会完全执行您的工作代码的操作。

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