使用jQuery Uploader顯示文件上傳進度

準備
請確保已經在 Download 下載資源 中的 JQueryElement.dll 下載一節下載 JQueryElement 最新的版本.
請使用指令引用如下的命名空間:
代碼如下:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" 
Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin" 
TagPrefix="je" %> 
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" 
Namespace="zoyobar.shared.panzer.web.jqueryui" 
TagPrefix="je" %> 
 
除了命名空間, 還需要引用 jQueryUI 的腳本和樣式, 在 Download 下載資源 的 JQueryElement.dll 下載一節下載的壓縮包中包含了一個自定義樣式的 jQueryUI, 如果需要更多樣式, 可以在 http://jqueryui.com/download 下載:除了命名空間, 還需要引用 jQueryUI 的腳本: 
 代碼如下:

<link type="text/css" rel="stylesheet" href="[樣式路徑]/jquery-ui-<version>.custom.css" /> 
<script type="text/javascript" src="[腳本路徑]/jquery-<version>.min.js"></script> 
<script type="text/javascript" src="[腳本路徑]/jquery-ui-<version>.custom.min.js"></script> 
 
創建保存頁面 
保存頁面是一個簡單的頁面, 主要完成文件的保存工作, 保存頁面不會自己提交, 而是由上傳頁面提交. 
添加 FileUpload 控件 
首先, 為保存頁面添加 FileUpload 控件: 
 代碼如下:

<form id="formFileUpload" runat="server"> 
上傳: <asp:FileUpload ID="file" runat="server" /> 
</form> 
 
也可以添加 type 屬性為 file 的 input 元素: 
 代碼如下:

<form id="formFileUpload" runat="server" enctype="multipart/form-data"> 
上傳: <input type="file" id="file" runat="server" /> 
</form> 
 
如果使用 input 元素, 則可能需要設置 form 的 enctype 屬性為 multipart/form-data. 
設置 EnableSessionState 
需要設置保存頁面的 EnableSessionState 為 ReadOnly, 這樣可以在保存頁面保存文件時, 請求獲取進度的頁面. 這主要是由于, ASP.NET 順序執行可以讀寫 Session 的頁面: 
 代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="FileUpload.aspx.cs" Inherits="uploader_FileUpload" 
EnableSessionState="ReadOnly" %> 
 
調用 Uploader 的 Save 方法 
在保存頁面的 Page_Load 方法中, 調用 Uploader 控件的 Save靜態方法來保存文件: 
 代碼如下:

protected void Page_Load ( object sender, EventArgs e ) 
{ 
if ( this.IsPostBack && this.file.HasFile ) 
// TODO: 這里設置 waitSecond 參數是為了在測試時顯示上傳的進度, 
// 在實際的使用中請不要設置 waitSecond, 并調整 bufferSize 為一個合理的值. 
Uploader.Save ( 
this.Server.MapPath ( @"~/uploader/photo.jpg" ), 
this.file.PostedFile, 
this.Session["myphotouploadinfo"] as Uploader.UploadInfo, 
1, 
1 ); 
// Uploader.Save ( 
// this.Server.MapPath ( @"~/uploader/photo.jpg" ), 
// this.file.PostedFile, 
// this.Session["myphotouploadinfo"] as Uploader.UploadInfo ); 
} 
 
代碼中, 通過 IsPostBack 和 HasFile 屬性判斷在用戶提交了文件后, 才進行保存. 
Save 方法的格式為 Save ( string filePath, HttpPostedFile postedFile, Uploader.UploadInfo uploadInfo, int bufferSize, int waitSecond ), filePath 參數是文件保存的完整路徑, postedFile 參數是提供文件控制的 HttpPostedFile 對象, 可以從 FileUpload 控件獲取, uploadInfo 參數是保存上傳進度信息的對象, bufferSize 參數是保存文件時的緩存大小, 默認 128kb 保存一次, 最后一個參數 waitSecond 只在測試時使用, 表示緩存被保存后的等待時間, 這樣可以確保看到進度. 
上傳大于 4mb 的文件, 請修改 web.config 的 maxRequestLength, 可以參考 http://msdn.microsoft.com/zh-cn/library/e1f13641(v=vs.71).aspx. 
創建獲取進度的頁面 
包含進度信息的對象 Uploader.UploadInfo 被保存在 Session 中, 因此可以隨時從 Session中獲取進度信息: 
 代碼如下:

<%@ WebHandler Language="C#" Class="uploader_getprec" %> 
using System.Collections.Generic; 
using System.Web; 
using System.Web.Script.Serialization; 
using System.Web.SessionState; 
using zoyobar.shared.panzer.ui.jqueryui.plusin; 
public class uploader_getprec : IHttpHandler, 
IReadOnlySessionState 
{ 
public void ProcessRequest ( HttpContext context ) 
{ 
context.Response.ContentType = "text/javascript"; 
context.Response.Cache.SetNoStore ( ); 
Uploader.UploadInfo info = 
context.Session["myphotouploadinfo"] as Uploader.UploadInfo; 
SortedDictionary<string, object> json = 
new SortedDictionary<string, object> ( ); 
if ( null == info ) 
json.Add ( "prec", "-" ); 
else 
{ 
json.Add ( "prec", info.Percent ); 
json.Add ( "total", info.ContentLength ); 
json.Add ( "posted", info.PostedLength ); 
if ( info.Percent == 100 ) 
json.Add ( "url", "photo.jpg" ); 
/* 
* { 
* "prec": 20.23 
* "total": 2000, 
* "posted": 2 
* } 
* */ 
} 
context.Response.Write ( 
new JavaScriptSerializer ( ).Serialize ( json ) 
); 
} 
 
需要注意的是, uploader_getprec 實現了接口 IReadOnlySessionState, 而不是 IRequiresSessionState. 原因也是和設置 EnableSessionState 為 ReadOnly 類似的. 至于如何返回 JSON 數據, 請參考 在不同的 .NET 版本中返回 JSON. 
創建上傳頁面 
最后一步就是創建一個上傳頁面, 在頁面中添加 Uploader控件: 
 代碼如下:

<je:Uploader ID="uploader" runat="server" IsVariable="true" 
UploadUrl="FileUpload.aspx" 
ProgressUrl="getprec.ashx" ProgressChanged=" 
function(data){ 
if(-:data.prec == '-') 
$('#prec').text('沒有進度!'); 
else 
if(-:data.prec == 100){ 
$('#prec').text('完成, 圖片路徑為: ' + -:data.url); 
pb.hide(); 
$('#photo').show().attr('src', -:data.url); 
} 
else{ 
$('#prec').text(-:data.posted + 
' bytes/' + -:data.total + ' bytes, ' + 
-:data.prec + '%'); 
pb.progressbar('option', 'value', -:data.prec); 
} 
} 
"> 
</je:Uploader> 
<je:Button ID="cmdUpload" runat="server" IsVariable="true" 
Label="開始" Click=" 
function(){ 
cmdUpload.hide(); 
uploader.__uploader('hide').__uploader('upload'); 
pb.show(); 
}"> 
</je:Button> 
 
設置保存頁面 
通過 Uploader 的 UploadUrl 屬性, 可以選擇保存頁面, 示例中, 選擇了頁面 FileUpload.aspx, 這將自動生成一個 iframe 元素, iframe 的 src 屬性指向 FileUpload.aspx 頁面. 
也可以自定義一個 iframe, 然后通過 Upload屬性選擇此 iframe: 
 代碼如下:

<iframe id="myIFrame" src="FileUpload.aspx"></iframe> 
<je:Uploader ID="uploader" runat="server" IsVariable="true" 
Upload="#myIFrame" 
... > 
</je:Uploader> 
 
設置獲取進度的頁面 
通過屬性 ProgressUrl 和 ProgressChanged 可以獲取并顯示上傳進度, ProgressUrl 表示返回進度信息的頁面地址, ProgressChanged 則用于處理返回的進度等信息. 
此外 ProgressInterval 屬性表示查詢進度的時間間隔, 默認為 1000 毫秒. 
上傳 
調用 uploader 的 upload方法, 即可觸發上傳操作: 
 代碼如下:

<je:Button ID="cmdUpload" runat="server" IsVariable="true" 
Label="開始" Click=" 
function(){ 
uploader.__uploader('upload'); 
}"> 
</je:Button> 
 
默認情況下將對保存頁面的第一個表單執行 submit 操作, 可以通過 UploadForm 屬性來調整需要提交的表單的索引. 
隱藏保存頁面 
調用 uploader 的 hide方法, 即可隱藏保存頁面: 
 代碼如下:

uploader.__uploader('upload'); 
 

JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.
實際過程演示: http://www.tudou.com/programs/view/-Zvwz5xsih8/, 建議全屏觀看.
歡迎訪問 panzer 開源項目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執行各種 js 和 jQuery 腳本以及錄制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement, 微博: http://t.qq.com/zoyobar
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com