關於jQuery在Asp.Net Mvc 框架下Ajax檔案上傳的實現

<form id="filePost" action="/Shared/Upload" method="post" enctype="multipart/form-data">

    <label> Filename: <input type="file" name="file" />label>

    <input id="ButtonUpload" type="submit" value="Upload" />

form>

         Index.aspx中的內容就寫好了。我看到action="/Shared/Upload"裡面需要一個“Upload”方法響應Post請求，可見，我單擊【Upload】按鈕就能將Post請求到“Upload”這個action裡執行後臺程式碼。

後臺程式碼：

public ActionResult Upload(HttpPostedFileBase file)

{

         if (file.ContentLength == 0) {

                   return Redirect("/Shared/Error");

         }

         var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

         try{

                  file.SaveAs(fileName);

                   return Redirect("/Home/Index");

         }catch{

                   return Redirect("/Shared/Error");

         }

}

      這樣，一個傳統的檔案上傳方案解決。單擊【Upload】按鈕頁面將會跳轉到“http://...../Shared/Upload”。

2. 實現網路檔案Ajax上傳解決方案

      現在對Index.aspx做一部分改動，讓檔案上傳方案實現“Ajax”，不需要重新整理頁面，也能實現檔案上傳，而且可以很好的處理請求返回，這是我們下一步的目標。

      1.在Index.aspx頁面新增一個元素，用於顯示請求返回結果。

如：<div id="outputdiv"> div>

      2.在http://jquery.malsup.com/form/#download網站下載jquery.form.js檔案，我們呼叫$.ajaxForm()或者$.ajaxSubmit()函式，實現目標。

<script type="text/javascript">

         $(document).ready(function() {

            var options = {

                target: '#outputdiv',  

                beforeSubmit: showRequest, 

                success: showResponse

            };

            $('#filePost').submit(function() {

                $(this).ajaxSubmit(options);

                return false;

            });

        });

        function showRequest(formData, jqForm, options) {          

            alert('傳送前');

            return true;

        }

        function showResponse(responseText, statusText) {

            alert('傳送後');

        } 

</script>

      在Index.aspx頁面中新增如上程式碼。

    3.在<div id="outputdiv"> div>元素中我希望它能顯示檔案上傳的結果，所以，Upload方法返回文字就可以，下面修改Upload方法如下：

public ActionResult Upload(HttpPostedFileBase file)

{

         if (file.ContentLength == 0) {

                   return Content("沒有檔案", "text/plain");

         }

         var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));

         try{

                  file.SaveAs(fileName);

                  return Content("上傳成功", "text/plain");

         }catch{

                   return Content("上傳失敗", "text/plain");

         }

}

實現Ajax檔案上傳解決方案。關於jquery.form的更多資訊，讀者可看考http://jquery.malsup.com/form/

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-618124/，如需轉載，請註明出處，否則將追究法律責任。