为什么jquery文件上传总是将单个文件发送到后端

Question

我面临多个文件上传的问题。

问题是：

1. 如果我上传2 files只1文件被发送到后端。

2. 仅最后一个文件发送到服务器（跳过其他文件，换句话说，只有1个文件发送到后端）

问题：我遇到一种情况，在每次输入时我都可以浏览多个文件并可以单击提交。我希望每个文件都应该发送到服务器。

这里：jsfiddle显示我的问题：http : //jsfiddle.net/eabangalore/jyteus6c/2/

注意：请console.log检查是否全部files发送到服务器。

下面是我的代码：

var filesUploadList = [];

function initializeMultipleFileUpload(){
    fileList.forEach(function(obj){
    
         $('input[data-id="'+obj.identifier+'"]').fileupload({
              url: 'https://jsonplaceholder.typicode.com/posts',
              autoUpload: false,
              maxChunkSize: 10*1024*1024, // 1MB
              maxRetries: 10,
              dataType: 'json',
              multipart: false,
              sequentialUploads: true,
              replaceFileInput: false,
              progress: function(e,data){
                  console.log('Progress for file Name:  ',data.data.name);
             },
          }).on("fileuploadadd", function (e, data) {
              filesUploadList.push(data.files[0])
          });
          
    });
}

var fileList = [
     {'fileNo':1,identifier:111},
     {'fileNo':2,identifier:222},
     {'fileNo':3,identifier:33}
];
var inputFileStr = '';
for(var i = 0; i< fileList.length; i++){
    inputFileStr += '<input type="file" multiple data-id="'+fileList[i].identifier+'"><button data-buttonid="'+fileList[i].identifier+'" class="comm-submit-btn">submit</button>';
}

$('#multiplefiles').html(inputFileStr);

initializeMultipleFileUpload(); //initialize fileupload here



$(document).ready(function () {

 $(".comm-submit-btn").click(function () {
        var fileUploadInputId = $(this).attr('data-buttonid');
        console.log('.....filesUploadList.........',filesUploadList);
        $('input[data-id="'+fileUploadInputId+'"]').fileupload('send', {files: filesUploadList });
 })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.iframe-transport.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.fileupload.min.js"></script>


<div id="multiplefiles">
  
</div>

任何请帮助我，但我无法继续进行

请提前帮助我！

Answer 1

看看api文档https://github.com/blueimp/jQuery-File-Upload/wiki/API

注意：send API方法直接发送给定的文件，而不将它们拆分为多个请求。因此，如果您的files参数由3个文件组成，它将仍然仅发送一个请求。如果multipart选项为true，它将仍然作为一个multipart请求的一部分发送所有3个文件，否则它将仅发送第一个文件。因此，如果您需要发送带有多个请求的文件，请多次调用send API方法，或者改用add API方法。

因此，将您的.comm-submit-btn处理程序修改为：

 $(".comm-submit-btn").click(function () {
var fileUploadInputId = $(this).attr('data-buttonid');
console.log('.....filesUploadList.........',filesUploadList);
filesUploadList.forEach(function(obj){
    $('input[data-id="'+fileUploadInputId+'"]').fileupload('send', {files: obj });
});

}）

Answer 2

您应该尝试设置 multipart: true

以下是文档链接。

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#singlefileuploads

明确提到一次请求上传多个文件需要将multipart选项设置为true