ASP.NET MVC - 上傳檔案至Web Server上 Part II (使用Ajax)

日期：
在ASP.Net MVC - 上傳檔案至Web Server上這篇中，
限量在文章的最後提到了使用Ajax傳送檔案的問題，
接著在XMLHttpRequest的基本應用中簡單介紹了XMLHttpRequest的使用方式，
有了XMLHttpRequest這個材料，就可以來調製Ajax傳送檔案的解藥了。


步驟很簡單，
解藥的程式碼組成只要將上述兩篇的程式碼複製貼上融合在一起，
在修改XMLHttpRequest部分的程式碼即可，
在XMLHttpRequest的範例裡，我們沒有傳送任何資料至Server端，
這次需要將Form裡的File檔案傳過去，
簡單來說，
只要在JavaScript程式區段裡產生一個FormData的Instance，
將Form裡input element的值用KeyValuePair的方式塞進FormData Instance裡，
最後再將FormData Instance藉由XMLHttpRequest送出就完成了，
以下為範例的程式碼：

 TestFileUpload.cshtml:
<!DOCTYPE html>
<html>
    <head>
 <title>TestFileUpload</title>
 <script>
     // 產生XMLHttpRequest物件的Function
     function CreateXMLHttpRequestObject() {
  try { return new XMLHttpRequest(); }
  catch (e) { }
         try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
  catch (e) { }
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
  catch (e) { }
  try { return new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { }
  throw new Error("This browser does not support XMLHttpRequest.");
     }

     // 上傳Form資料至Server
     function UploadForm(form) {
  // 產生FormData的Instance
  var fData = new FormData();
  // 將form裡的name=file的input element值塞入FormData
  fData.append( 'file', document.getElementById( 'file' ).files[0] );
  // 將form裡的name=test的input element值塞入FormData
  fData.append( 'test', document.getElementById( 'test' ).value );

  var xhr = CreateXMLHttpRequestObject();
  xhr.open(form.method, form.action, true);
  xhr.onreadystatechange = function ()
  {
      if (xhr.readyState == 4 && xhr.status == 200) {
   alert(xhr.responseText);
      }
  };
  xhr.send( fData );
     }
 </script>
    </head>
    <body>
 <div>
     <form action="@Url.Action("TestFileUpload", "Home")" method="post" enctype="multipart/form-data">
         <input type="file" name="file" id="file" /><br />
  <input type="text" name="test"/>
  <input type="submit" name="submit" value="Submit" onsubmit="UploadForm(this)" />
     </form>
 </div>
    </body>
</html>

HomeController.cs
[HttpPost]
public ActionResult TestFileUpload( HttpPostedFileBase file, String test )
{
    var path = String.Empty;
    var uploadDir = Server.MapPath( "~/App_Data/Uploads" );
    if ( file != null && file.ContentLength > 0 )
    {
 if ( !Directory.Exists( uploadDir ) )
     Directory.CreateDirectory( uploadDir );
 path = Path.Combine( uploadDir, file.FileName );
 file.SaveAs( path );
    }
    return RedirectToAction( "Index", "Home" );
}

這邊要注意的是TestFileUpload所帶的參數名稱要和FormData的KeyValuePair的Key名稱相符，否則會抓不到資料。


參考來源：
W3CSchool AJAX - Send a Request To a Server




留言

張貼留言