当前位置：首页 > article >正文

ASP.NET Core 简单文件上传

article 2025/2/24 2:37:43

使用异步 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>