Asp.net 使用 Ajax 上传多个文件

Posted 2023-04-13

【中文标题】Asp.net 使用 Ajax 上传多个文件

【英文标题】：Asp.net multiple files upload using Ajax

【发布时间】：2021-03-21 22:20:49

【问题描述】：

我正在尝试上传多个文件，但使用 ajax，我面临两个具体问题

首先（java脚本问题）： 如何在发送之前循环输入文件并将其放入文件数组中（通过ajax）

第二个：（c#问题）： 如何在后端接收文件（我应该使用什么类型的数据作为参数数据类型？）

这是我失败的尝试：

html代码：

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

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

【参考方案1】：

需要注意的重要一点是参数名称

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

【参考方案2】：

查看此链接： https://www.c-sharpcorner.com/UploadFile/da55bf/multiple-files-upload-using-jquery-ajax-and-jqueryui-progres

一次上传多个文件并使用进度条将它们保存在本地文件夹中

我对上面的工作示例做了一些修改

向表单数据添加了额外的参数

formData.append("LoanNo", $jq("#LoanNo").html()); formData.append("MemberNo", $jq("#MemberNo").html());

在服务器端

HttpFileCollection UploadedFilesCollection = context.Request.Files; string loanno = context.Request["LoanNo"].ToString(); string memberno = context.Request["MemberNo"].ToString();

【讨论】：

我对上述工作示例 1 做了一些修改。向 formdata formData.append("LoanNo", $jq("#LoanNo").html()); formData.append("MemberNo", $jq("#MemberNo").html()); 和服务器端 HttpFileCollection UploadedFilesCollection = context.Request.Files; string loanno = context.Request["LoanNo"].ToString(); string memberno = context.Request["MemberNo"].ToString(); 添加了附加参数