使用ajax一次上传多个文件答案

【问题标题】：Upload multiple files at once using ajax使用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);

                }
            });
        });

【问题讨论】：

标签： javascript c# jquery asp.net-mvc-5

【解决方案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++;
    });
});

【讨论】：