使用ajax一次上传多个文件

Posted 2023-04-12

【中文标题】使用ajax一次上传多个文件

【英文标题】：Upload multiple files at once using ajax

【发布时间】：2020-10-08 17:27:28

【问题描述】：

检查下面的代码。在这里，我试图一次上传多个用户选择的文件，但问题是 ajax 没有发送所有选定的文件。它只是从选定的文件中发送第一个文件。我在这里做错了什么？

c#类：

public class AddAssets
    
        public List<HttpPostedFileBase> my_file  get; set; 
    

mvc5 方法：

[HttpPost]
        public JsonResult mymethod(AddAssets data)
        

html：

 <div class="modal-body">
                        <input type="file" name="my_file[]" class="theFiles" id="files" multiple>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="Upload">Upload</button>
                    </div>

jquery：

 $('#Upload').click(function () 

            var form_data = new FormData();
            $.each($(".theFiles"), function (i, obj) 
                $.each(obj.files, function (j, file) 
                    form_data.append('my_file[' + i + ']', file); 
                );

            );



            $.ajax(
                url: '/controller/mymethod',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function (data) 

                    console.log(data);
                ,
                error: function (error) 
                    console.log(error);

                
            );
        );

【参考方案1】：

从$.ajax( 中删除dataType: 'text',。

当您附加文件时，您使用form_data.append('my_file[' + i+ ']', file);。在这里，您使用的文件名 'my_file[' + i+ ']' 对于所有文件都是相同的。这似乎是问题的原因。

使用另一个variable 来设置文件名，如下所示的index。

var form_data = new FormData();
var index = 0;
$.each($(".theFiles"), function (i, obj) 
    $.each(obj.files, function (j, file) 
        form_data.append('my_file[' + index + ']', file); 
        index++;
    );
);