jquery $ .each breaks FormData appending

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; 
     } 
     }); 
    } 

файл-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]);