Asp.Net 無刷新文件上傳並顯示進度條的實現方法及思路

相信通過Asp.Net的服務器控件上傳文件在簡單不過了,通過AjaxToolkit控件實現上傳進度也不是什麼難事，為什麼還要自己辛辛苦苦來 實現呢？我並不否認”拿來主義“，只是我個人更喜歡凡是求個所以然。本篇將闡述通過Html，IHttpHandler和 IHttpAsyncHandler實現文件上傳和上傳進度的原理，希望對你有多幫助。

效果圖：

本文涉及到的知識點：
1.前台用到Html,Ajax,JQuery,JQuery UI

2.後台用到一般處理程序(IHttpHandler)和一般異步處理程序(IHttpAsyncHandler)，並涉及到”推模式“

一、創建Html網頁

1、在創建的Web工程中添加一個Html文件，命名為UploadFile.htm，在頭文件中引入JQuery,JQuery UI

    <link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

2、關於無刷新文件上傳

通過Ajax是不能上傳文件的，無刷新上傳是靠隱藏的iframe來實現的

<form id="form" target = "frameFileUpload" enctype="multipart/form-data">
<div id="progressBar" style="font-size: 1em;"></div>
<input type="file" id="fileUpload" name="fileUpload" /><span id="progressValue"></span>
<iframe id="frameFileUpload" name="frameFileUpload" style="display:none;" ></iframe>
<br />
<input type="submit" value="上傳" id = "submit"/>
</form>

要將form標簽的target屬性設置為iframe的id,當然別忘了將form的enctype設置為multipart/form-data

<div id="progressBar" style="font-size: 1em;"></div>

是用來顯示上傳文件時的進度條

在JS中加入如下處理：

    <script type="text/javascript">         $(function () {             $("#submit").button();             $("#fileUpload").button();         });     </script>

此時效果:

二、實現文件上傳

添加一個一般處理程序，命名為UploadFileHandler.ashx

        public void ProcessRequest(HttpContext context)         {             //如果提交的文件名是空，則不處理
            if (context.Request.Files.Count == 0 || string.IsNullOrWhiteSpace(context.Request.Files[0].FileName))                 return;             //獲取文件流
            Stream stream = context.Request.Files[0].InputStream;             //獲取文件名稱
            string fileName = Path.GetFileName(context.Request.Files[0<SPA< td>