在 ASP.NET MVC 中通过 JQuery AJAX 上传文件

Posted 2023-03-22

【中文标题】在 ASP.NET MVC 中通过 JQuery AJAX 上传文件

【英文标题】：File Upload Through JQuery AJAX In ASP.NET MVC

【发布时间】：2021-12-10 16:17:44

【问题描述】：

我需要向候选人发送邀请，其中用户选择 excel 文件，将其从 ajax 传输到控制器并验证其大小、类型等。然后用户单击“发送邀请”按钮并发送电子邮件邀请（具有 excel 文件）。请参考以下代码：

<button type="button" id="bulkuploadButton">Bulk Email Upload</button>
<input type="file" id="ExcelFile" name="ExcelFile" style="display:none" onchange="UploadFile();" onselect="UploadFile();" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

jquery：

function UploadFile() 
  if (ValidateExcelFile()) 
     var excelFile = document.getElementById('ExcelFile');
     formData = new FormData();
     if (excelFile.files.length > 0) 
        for (var i = 0; i < excelFile.files.length; i++) 
           formData.append('file-' + i, excelFile.files[i]);
        
     
     $.ajax(
       url: url here,
       type: "POST",
       dataType: 'json',
       processData: false,
       contentType: false,
       data: formData,
       success: function (data) 
        // Further Processing
       ,
       error: function (err) 
        //Error
       
     );
   

控制器：

[HttpPost]
public JsonResult MyController(HttpPostedFileBase excelFile)

 if (Request.Files.Count > 0)
 
   foreach (string file in Request.Files)
   
     excelFile = Request.Files[file];
          
   var result = //Call Model here for validation checks and return error msges
   TempData["ExcelFile"] = excelFile; //Store in TempData for further processing
   return Json(result);
      
  return null;

验证已成功完成，现在是时候向候选人发送邀请了：

<button onclick="SendInvite">Send Invitations</button>

jquery：

function SendInvite() 
  //Check validations for other inputs on the page

  //Get the excel file same as above
  var excelFile = document.getElementById('ExcelFile');
  formData = new FormData();
  if (excelFile.files.length > 0) 
    for (var i = 0; i < excelFile.files.length; i++) 
      formData.append('file-' + i, excelFile.files[i]);
    
  
  $.ajax(
    type: "POST",
    url: url here,
    data: JSON.stringify(
           myModel: myModel,
           excelFile: formData
          ),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) 
    ,
    error: function (data) 
    
   );

控制器：

public JsonResult MyController2(MyModel myModel, HttpPostedFileBase excelFile)

 //I tried the same method to get the file but it didn't help me
 if (Request.Files.Count > 0)  //Here Request.Files.Count = 0, it should be = 1 instead
 
  foreach (string file in Request.Files) 
  
    excelFile = Request.Files[file];
  
 

 //I then tied to use TempData but it does not have the excel data

 excelFile = TempData["ExcelFile"] as HttpPostedFileBase;

 //Further processing

从 TempData 获取数据时出现此错误。 ContentLength 为 0 且数据属性为空

TempData 中的数据应该是这样的（其中 ContentLength !=0 并且数据属性有一些价值）：

谁能帮我获取控制器 MyController2 中的 excel 数据。

【问题讨论】：

您想通过邮件发送邀请吗？您能否更具体地说明您到底遇到了什么错误？

@TBA，我已经指定我想向候选人发送电子邮件邀请。我现在已经为我遇到的错误添加了图片

***.com/questions/22706663/…希望这会对你有所帮助。

@Neeraj，在excelFile 的MyController 中获得null 值，因此卡在这里。

使用 ajax 发送文件时可能会出现一些错误，只需直接在附加 formdata 中发送文件检查此***.com/questions/10899384/…

【参考方案1】：

将函数 SendInvite() 更改为：

function SendInvite() 
  //Check validations for other inputs on the page

  //Get the excel file same as above
  var excelFile = document.getElementById('ExcelFile');
  formData = new FormData();

  formData.append("data", JSON.stringify(myModel));

  for (var i = 0; i < excelFile.files.length; i++) 
     var file = ExcelFile.files[i];
     formData.append("excelFile", file);
  
  $.ajax(
    type: "POST",
    url: url here,
    data: formData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    contentType: false,
    processData: false,
    success: function (data) 
    ,
    error: function (data) 
    
   );

在控制器中

public JsonResult MyController2(string data, HttpPostedFileBase[] excelFile)

 MyModel myModel = JsonConvert.DeserializeObject<MyModel>(data);
 if (Request.Files.Count > 0)  
 
  //Do data processing here
     

 //Further processing

查看此链接How to Pass Image File and Form Data From Ajax to MVC Controller