Загрузите сразу несколько файлов, используя ajax

Question

Проверьте код ниже. Здесь я пытаюсь загрузить сразу несколько файлов, выбранных пользователем, но проблема в том, что 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);

                }
            });
        });

Answer 1

Удалите dataType: 'text', из $.ajax({.

Когда вы добавляете файлы, вы используете 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++;
    });
});