ASP.NET MVC AJAX 文件上传_mvc ajax上传文件-优快云博客

本文链接：https://blog.youkuaiyun.com/hefeng_aspnet/article/details/144914424

如何使用 MVC 5 和 AJAX（.NET Framework）上传文件。
使用AJAX和ASP.NET MVC 上传文件再简单不过了。对于最纯粹的人来说，这不需要使用jQuery。此代码实际上允许上传多个文件。

注意：以下代码示例支持 ASP.NET MVC 5。如果使用 .NET Core，请转到ASP.NET Core 示例。

首先，在 Visual Studio 中创建一个名为“Website”的 Web 应用程序 (MVC)。

现在，客户端。一半的工作由函数完成buildFormData()。有关的完整实现buildFormData()，请参阅AJAX 库源代码。

如果使用 CSHTML 文件，则使用此代码：

@{
Layout = null;
}
<html>
   <head>
   <title></title>
   <script type="text/javascript">
   function xmlHttp(){
       if(XMLHttpRequest){
           return new XMLHttpRequest();
       } else if(window.ActiveXObject){
           var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
           for(var i = 0; i < aVersions.length; i++){
               try{
                   var oXmlHttp = new ActiveXObject(aVersions[i]);
                   return oXmlHttp;
               }catch(oError){
                   //void
               }
           }
       }
       throw new Error("XMLHttp object could not be created.");
   }
   //used for posting "multipart/form-data"
   function buildFormData(form_object) {
       var fd = new FormData();
       for (var i = 0; i < form_object.elements.length; i++) {
           if (form_object.elements[i].name != null && form_object.elements[i].name != "") {
               if (form_object.elements[i].type == "checkbox") {
                   if (form_object.elements[i].checked) {
                       fd.append(form_object.elements[i].name, form_object.elements[i].value)
                   }
               }
               else if (form_object.elements[i].type == "file") {
                   for (var j = 0; j < form_object.elements[i].files.length; j++) {
                       fd.append(form_object.elements[i].name,
                       form_object.elements[i].files[j],
                           form_object.elements[i].files[j].name)
                   }
               }
               else {
                   fd.append(form_object.elements[i].name, form_object.elements[i].value)
               }
           }
       }
       return fd;
   }
   function submitForm(oform)
   {
       if (window.FormData !== undefined) {
           document.getElementById("SubmitButton").disabled = true;
           var formData = buildFormData(oform);
           var xmlobj = xmlHttp();
           xmlobj.onreadystatechange = function () {
               if (xmlobj.readyState == 4) {
                   if (xmlobj.status == 200) {
                       document.getElementById("divResponse").innerHTML = xmlobj.responseText;
                       document.getElementById("SubmitButton").disabled = false;
                   }
                   else {
                       throw new Error("Error: " + xmlobj.status + ": " + xmlobj.statusText);
                   }
               }
           };
           xmlobj.open("post", oform.action, true);
           xmlobj.send(formData);
       }
       else {
           alert("This browser does not support posting files with HTML5 and AJAX.");
       }
       return false;
   }
   </script>
   </head>
   <body>
   <form enctype="multipart/form-data" οnsubmit="return submitForm(this);" method="post" action="/Ajax/UploadFile">
       @Html.AntiForgeryToken()
       <input type="text" required name="fullname" placeholder="enter your name here" /><br />
       <input type="file" accept="image/jpeg" multiple required name="file1" /><br />
       <input type="submit" id="SubmitButton" value="Upload File(s)" />
   </form>
   <div id="divResponse"></div>
   </body>
</html>

如果仍在使用 ASPX 文件，则使用此代码：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<html>
   <head>
   <title></title>
   <script type="text/javascript">
   function xmlHttp(){
       if(XMLHttpRequest){
           return new XMLHttpRequest();
       } else if(window.ActiveXObject){
           var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
           for(var i = 0; i < aVersions.length; i++){
               try{
                   var oXmlHttp = new ActiveXObject(aVersions[i]);
                   return oXmlHttp;
               }catch(oError){
                   //void
               }
           }
       }
       throw new Error("XMLHttp object could not be created.");
   }
   //used for posting "multipart/form-data"
   function buildFormData(form_object) {
       var fd = new FormData();
       for (var i = 0; i < form_object.elements.length; i++) {
           if (form_object.elements[i].name != null && form_object.elements[i].name != "") {
               if (form_object.elements[i].type == "checkbox") {
                   if (form_object.elements[i].checked) {
                       fd.append(form_object.elements[i].name, form_object.elements[i].value)
                   }
               }
               else if (form_object.elements[i].type == "file") {
                   for (var j = 0; j < form_object.elements[i].files.length; j++) {
                       fd.append(form_object.elements[i].name,
                       form_object.elements[i].files[j],
                           form_object.elements[i].files[j].name)
                   }
               }
               else {
                   fd.append(form_object.elements[i].name, form_object.elements[i].value)
               }
           }
       }
       return fd;
   }
   function submitForm(oform)
   {
       if (window.FormData !== undefined) {
           document.getElementById("SubmitButton").disabled = true;
           var formData = buildFormData(oform);
           var xmlobj = xmlHttp();
           xmlobj.onreadystatechange = function () {
               if (xmlobj.readyState == 4) {
                   if (xmlobj.status == 200) {
                       document.getElementById("divResponse").innerHTML = xmlobj.responseText;
                       document.getElementById("SubmitButton").disabled = false;
                   }
                   else {
                       throw new Error("Error: " + xmlobj.status + ": " + xmlobj.statusText);
                   }
               }
           };
           xmlobj.open("post", oform.action, true);
           xmlobj.send(formData);
       }
       else {
           alert("This browser does not support posting files with HTML5 and AJAX.");
       }
       return false;
   }
   </script>
   </head>
   <body>
   <form enctype="multipart/form-data" οnsubmit="return submitForm(this);" method="post" action="/Ajax/UploadFile">
       <%: Html.AntiForgeryToken() %>
       <input type="text" required name="fullname" placeholder="enter your name here" /><br />
       <input type="file" accept="image/jpeg" multiple required name="file1" /><br />
       <input type="submit" id="SubmitButton" value="Upload File(s)" />
   </form>
   <div id="divResponse"></div>
   </body>
</html>

接下来是服务器端。创建一个名为“Ajax”的控制器并添加UploadFile()方法。

// AjaxController.cs
using System;
using System.Web.Mvc;

namespace Website.Controllers
{
   public class AjaxController : Controller
   {
       [HttpPost]
       [ValidateInput(false)]
       [ValidateAntiForgeryToken]
       public string UploadFile()
       {
           int i;
           for (i = 0; i < Request.Files.Count; i++)
           {
               if (Request.Files[i].ContentLength > 0)
               {
                   if (Request.Files[i].ContentType.ToLower() == "image/jpeg") // can be modified or omitted
                   {
                       try
                       {
                           // make sure that this directory has write permissions
                           Request.Files[i].SaveAs(Request.MapPath("/") + Request.Files[i].FileName);
                       }
                       catch (Exception ex)
                       {
                           return ex.Message.ToString();
                       }
                   }
               }
           }
           return i.ToString() + " files copied. Hello, " + Request.Form["fullname"];
       }
   }
}

收尾工作
最后，确保服务器将接受大型上传并给予上传足够的时间来完成（超时）。编辑Web.config文件以包含这些部分。注意：ASP.NET Core 要求您创建一个web.config文件。

<system.web>
<httpRuntime executionTimeout="600" maxRequestLength="20480" requestValidationMode="2.0"/>
</system.web>

<system.webServer>
<security>
   <requestFiltering>
   <requestLimits maxAllowedContentLength="102400000"/>
   </requestFiltering>
</security>
</system.webServer>

再简单不过了！！！

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。