多文件上传 Ajax 请求问题答案

【问题标题】：Multiple File Upload Ajax Request Issue多文件上传 Ajax 请求问题
【发布时间】：2017-09-08 10:44:12
【问题描述】：

这目前可以上传一个文件，但是当我尝试上传多个文件时它不起作用，它只上传从浏览按钮中选择的第一个文件。请帮忙看看如何让这个接受多个文件被选中？

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

        }

谢谢！

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您必须创建一个表单数据对象并将文件输入附加到它，在循环中使用 files[] 对象...

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' 是文件字段的名称，将其替换为您的... 这应该可以，稍后谢谢我..

【讨论】：

这似乎不起作用，也许我做得不对。您介意在我最初的问题中解释如何将上述内容添加到现有代码中吗？
我的字段名为 'file' 浏览
您能帮忙解决这个问题吗？
在这行代码中，尝试更改为这个 formData.append('file[]', $('input[type=file]')[0].files[0]); - 使用 'file[]' 代替 file，看看它是否有效。
因为它实际上是一个文件数组，所以使用'file[]'，这样它就创建了一个多值的对象。

【解决方案2】：

这对我有用。

HTML

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

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

【讨论】：