萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> asp.net編程 >> Asp.Net 無刷新文件上傳並顯示進度條的實現方法及思路

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>
copyright © 萬盛學電腦網 all rights reserved