如何使用 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>
再简单不过了！！！
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。