javascript - 为什么 jquery-file upload 总是发送单个文件到后端

Question

我遇到了多个文件上传的问题。

问题是:

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

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

问题:我有这样一种情况，每次输入我都可以浏览多个文件并可以点击提交。我希望每个文件都应该发送到服务器。

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

注意:请通过console.log检查所有文件是否发送到服务器。

下面是我的代码:

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

Note: The send API method sends the given files directly, without splitting them up into multiple requests. So if your files argument is made up of 3 files, it will still only send one request. If the multipart option is true, it will still send all 3 files as part of one multipart request, else it will only send the first file. So if you need to send files with multiple requests, either call the send API method multiple times, or use the add API method instead.

因此将您的 .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 });
});

})