使用异步 JavaScript 和 XML（AJAX）进行简单的文件上传；用 C# 编写的服务器端代码。
使用AJAX和ASP.NET Core MVC上传文件再简单不过了。这不依赖于jQuery。此代码允许上传多个文件，并与 .NET Core 3.1、.NET 6和.NET 8兼容。
如果想要实现拖放版本，请参阅本文：ASP.NET Core MVC AJAX Drap-n-Drop 文件上传
注意：以下代码示例支持 ASP.NET Core。如果使用 ASP.NET MVC 5，请转到.NET Framework 示例。如果想要从服务器下载文件，请参阅本文。
首先，在 Visual Studio 中创建一个名为“Website”的 ASP.NET Core Web 应用程序 (MVC)。
首先是客户端。一半的工作由函数完成buildFormData()。有关的完整实现buildFormData()，请参阅AJAX 库源代码。
@{
Layout = null;
}
<html>
<head>
<title></title>
<script type="text/javascript">
function createXMLHttp(){
if(typeof XMLHttpRequest != "undefined"){
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 = createXMLHttp();
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>
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。
