多文件上载Ajax请求问题

时间:2017-04-12 14:59:19

标签: javascript jquery ajax

这当前可以上传一个文件,但是当我尝试上传多个文件时它不起作用,它只从浏览按钮上传第一个选定的文件。请帮忙说明如何选择接受多个文件?

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

        }

谢谢!

2 个答案:

答案 0 :(得分:0)

你必须使用循环中的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
}

其中&#39; uplfiles&#39;是文件字段的名称,替换为您的... 这应该有用,谢谢我以后..

答案 1 :(得分:0)

这对我有用。

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