使用異步 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>
如果您喜歡此文章，請收藏、點贊、評論，謝謝，祝您快樂每一天。??
的強大功能)
——Brick_Breaker詳細制作全流程)
