多个文件上传Ajax请求问题

Question

当前可以上传一个文件，但是当我尝试上传多个文件时，它不起作用，并且仅从浏览按钮上传第一个选定的文件。 请帮助如何使它接受选择的多个文件？

    function makeProgress(number){   
      var url = getRelativeURL("web/fileUpload");        
      var formData = new FormData();
      formData.append('number', number);
      formData.append('file', $('input[type=file]')[0].files[0]);       
      console.log("form data " + formData);
      $.ajax({
          url : url,
          data : formData,
          processData : false,
          contentType : false,
          type : 'POST',
          success : function(data) {
           FileUploadVisible(true);
           $('#attachmentModal').modal('hide')
           $(':input','#attachmentModal').val("");
            $("#pbarmain").hide();
            $("#pbar").hide();
            $("#actionPlanDiv").hide();
            setObjectEnabled('#Upload',false);
          },
          error : function(err) {
              FileUploadErrorVisible(true);
          }
     });

        }

谢谢！

Answer 1

您必须使用循环中的files []对象来创建formdata的对象并将输入的文件附加到该对象中...

fd = new FormData();    
fls = document.getElementById('uplfiles').files; //length of files... 
for(j=0;j<fls.length;j++){
   fd.append('files[]', fls[j]);  //note files[] not files
}

其中“ uplfiles”是文件字段的名称，将其替换为您的名称...这应该可以工作，稍后再谢谢。

Answer 2

这对我有用。

HTML

<input type="file" id="my_uploads" multiple>

JS

// upload img
$('#my_uploads').on('change', function(e) {
    var formData = new FormData();
    var files = $('#my_uploads').prop('files');

    $.each(files, function(i, file) {
        formData.append('my_uploads', file);

        $.ajax({
            type: 'POST',
            url: 'process-upload.php',
            cache: false,
            contentType: false,
            processData: false,
            data : formData,
            success: function(response){
                console.log(response);
            },
            error: function(err){
                console.log(err);
            }
        })
    });
});