使用 ajax 一次上传多个文件

Question

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

c#class:

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

                }
            });
        });

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

使用 ajax 一次上传多个文件

Upload multiple files at once using ajax

javascript

c#

jquery

asp.net-mvc-5