Блог

Я пытаюсь загрузить несколько файлов, но, используя ajax, я сталкиваюсь с двумя конкретными проблемами

первое (проблема Java script): как перебирать входные файлы и помещать их в массив файлов перед отправкой (с помощью ajax)

второе: (проблема с c #): как получить файлы в серверной части (какой тип данных я должен использовать в качестве типа данных параметра?)

вот моя неудачная попытка:

html — код:

 <input type="file" name="file" accept=".pdf,.docx,.doc" class="drop-zone__input" multiple>
 

jQuery ( jQuery ):

   <script>
    $(document).ready(function () {
        $('#addreply').click(

            function () {

                {
                    var files = $("#fileInput").get(0).files;
                    var fileData = new FormData();

                    for (var i = 0; i < files.length; i  ) {
                        fileData.append("fileInput", files[i]);
                    }
                            var formData = new FormData();
                    //formData.append('file', $("[name='file']")[0].files[0]); // myFile is the input type="file" control
                    formData.append('reply', $("[name='reply']").val()); // myFile is the input type="file" control
                    formData.append('mid', @Model.Message.Id); // myFile is the input type="file" control
                    formData.append('files', fileData); // myFile is the input type="file" control

                    var _url = '@Url.Action("AddReplyDetails", "Messages")';
                        $.ajax({
                            url: _url,
                            type: 'POST',
                            data: formData,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false,  // tell jQuery not to set contentType
                            success: function (result) {
                                //$('#file').val("")
                                $("#ssss").load(window.location   " #ssss").find('.rm').last().hide().fadeIn();
                                $('html, body').animate({
                                    scrollTop: $('.rm').last().offset().top
                                }, 2500);
                            },
                            error: function (jqXHR) {
                            },
                            complete: function (jqXHR, status) {
                            }

                        });

                }
                $("#reply").val('')

                });
    });
    </script>
 

серверная часть:

    public async Task<IActionResult> AddReplyDetails(List<IFormFile> files,IFormFile file, string reply, int mid)
    {

        string filesnames="";
        foreach (var item in files)
        {
           filesnames  =await UserFile.UploadeNewFileAsync("", item, _environment.WebRootPath, Properties.Resources.Files);
            filesnames  = ",";
        }
        Message message = _context.Messages.SingleOrDefault(m => m.Id == mid);
        message.LastActivitydate = DateTime.Now;
        message.IsRead = false;
        _context.Messages.Update(message);
        _context.MessageReplies.Add(new MessageReply
        {
            ApplicationUserId = _userManager.GetUserId(User),
            Content = reply.Replace("n", "<br/>"),
            Attachment = filesnames,
            MessageId = mid,
            DateOfRecord = DateTime.Now,
            IsRead = false,
            IsDeleted = false,
            IsReported = false,
        });
        _context.SaveChanges();

        return RedirectToAction("Details", "Messages", new { id = mid });
    }
 

Важно отметить, что имена параметров

 AddReplyDetails(List<IFormFile> files, IFormFile file, string reply, int mid)
 

итак, у вас есть files , file , reply , mid

если вы публикуете FormData (что вам понадобится, если вы публикуете файлы)

Вы хотите попытаться сопоставить имена параметров

 var formData = new FormData();
formData.append('file', $("[name='file']")[0].files[0]);
formData.append('reply', $("[name='reply']").val());
formData.append('mid', @Model.Message.Id);
for (var i = 0; i < files.length; i  ) {
    formData.append('files',files[i]);
}
 

и при публикации укажите заголовок типа содержимого

 headers: {'Content-Type': 'multipart/form-data'}
 

Я бы рекомендовал обернуть вышесказанное в объект формы.

 public class MyForm {
   public List<IFormFile> Files {get;set;} 
   public IFormFile File {get;set;}
   public string Reply {get;set;}
   public int Mid {get;set;}
}
// note the name of the parameter
AddReplyDetails([FromForm] MyForm form)
 

а потом измениться FormData

 var formData = new FormData();
formData.append('form.file', $("[name='file']")[0].files[0]);
formData.append('form.reply', $("[name='reply']").val());
formData.append('form.mid', @Model.Message.Id);
for (var i = 0; i < files.length; i  ) {
    formData.append('form.files',files[i]);
}
 

Проверьте эту ссылку: https://www.c-sharpcorner.com/UploadFile/da55bf/multiple-files-upload-using-jquery-ajax-and-jqueryui-progres

загружайте несколько файлов одновременно и сохраняйте их в локальной папке с индикатором выполнения

Я внес несколько изменений в приведенный выше рабочий пример

1. добавлены дополнительные параметры для formdata

   FormData.append(«LoanNo», $jq(«#LoanNo»).html()); FormData.append(«MemberNo», $ jq(«#MemberNo»).html());

2. и на стороне сервера

   HttpFileCollection UploadedFilesCollection = context.Request.Файлы; строка loanno = context.Request[«LoanNo»].toString(); строка memberno = context.Request[«MemberNo»].toString();