使用 jQuery 和 ASP.NET MVC 异步上传文件，无需表单提交和异步

Posted 2023-04-13

【中文标题】使用 jQuery 和 ASP.NET MVC 异步上传文件，无需表单提交和异步

【英文标题】：File upload without form submit and asynchronously using jQuery and ASP.NET MVC

【发布时间】：2019-10-05 08:20:20

【问题描述】：

Upload-Debugging Master Page JQuery Reference

我的 asp.net mvc 视图页面中有一个输入文件控件，如下所示。我正在尝试在不使用表单并借助 jQuery ajax 的帮助下将文件从视图加载到控制器。

我没有在视图页面中使用任何 Iframe / FORM。文件数据未发布到控制器。

System.Web.HttpContext.Current.Request.Files.Count - 始终显示为零。 和 $("#AttachmenteUploadFile").get(0).files 在部署到舞台环境后也显示“未定义”。 我在我的 html/JQuery/C# 中做错了什么。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <table id="tableView" border="0">
        <tr>
            <td style="text-align:right;color:black">                   
                <%=LabelHelper.Label("lblFile", "Supplier", "File", Model.User.CultureCode)%>
            </td>
            <td style="text-align:left">
                <input type="file" id="AttachmenteUploadFile" />
                <input type="button" id="btnUploadSubmit" value="Attach Document" />
            </td>
        </tr>             
    </table>
</div>   
</asp:Content>

这里是 JQuery 按钮的 Onclick 事件。

$("#btnUploadSubmit").click(function() 
    if (RequiredFieldValidate() != false)      
    var fileData = new FormData();
    var files = $("#AttachmenteUploadFile").get(0).files;    
    if (FileSizeValidation(filesize) != false) 
    
        for (var i = 0; i < files.length; i++) 
        fileData.append(files[i].name, files[i]);
            
    fileData.append('documentType', $('#ddlDocumentType').val());
    var AttachTypeCode = $('#ddlDocumentType').val();
    $.ajax(
        type: "POST",
        url: getExactPath('/Upload/UploadDocument'),
        data: fileData,
        dataType: 'Json',
        processData: false,
        contentType: false,
        success: function(jsonData) 
            var jsonobj = $.parseJSON(jsonData);
            FillGrid(jsonobj);
        ,
        error: function() 
            alert("Unable to upload the Document.");
        );););

来自 JQuery 调用的控制器 ActionResult。

[HttpPost]
public ActionResult UploadDocument() 
     
    List < string > mimeType = DocumentumUtil.getMimeTypes();
    if (System.Web.HttpContext.Current.Request.Files.Count > 0)
              
        docFullPath = System.Web.HttpContext.Current.Request.Files[0].FileName;
       docFullName = System.Web.HttpContext.Current.Request.Files.AllKeys[0];
       int index = docFullName.LastIndexOf('.');
       docname = docFullName.Substring(0, docFullName.LastIndexOf('.'));
       docExt = docFullName.Substring(index + 1);  
      
 catch 

return Json(AttachmentDetails, JsonRequestBehavior.AllowGet);

请有人帮忙。我被困住了。提前致谢。

更新： 客户端问题已解决，因为 FormData 在 IE（文档模式 7）中不起作用，我已更改为更高版本。但是 System.Web.HttpContext.Current.Request.Files.Count 我仍然是零

【问题讨论】：

你试过下面的答案吗

是的，我试过了。没有运气。我不确定这里有什么问题。

试试@Amit Sakare 的回答。

【参考方案1】：

在您的表单中添加此属性。 enctype="multipart/form-data"

并确保输入文件名称与动作方法的参数或类的属性相同

【讨论】：

你的意思是控制器动作名和输入文件名应该一样？

【参考方案2】：

在设计中放置Name 属性。

<input type="file" id="AttachmenteUploadFile" name="FileUpload_"/>

并检查一次。

【讨论】：

我也试过了，还是不行。当我创建新的 asp.net-mvc 项目时，我能够获取文件上传控制信息，我在我现有的 asp.net mvc 应用程序之一中使用它。此功能不起作用的地方。我是否缺少任何 JQuery 引用？我正在使用母版页，它指的是 jquery 引用。请看附件图片

这与我认为的JQuery 引用无关。

当我开始工作时，我在视图页面中提到了“cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”和“code.jquery.com/ui/1.12.1/jquery-ui.js”，它在本地工作。但是在阶段脚本失败了。所有的开发工作都完成了，我被困在这里，然后才开始生产。