使用jQuery Uploader顯示文件上傳進(jìn)度
更新時(shí)間：2011年12月22日 22:16:27 作者：
在上傳大文件的時(shí)候, 我們都希望可以向用戶顯示上傳的進(jìn)度, 那么這里介紹的就是使用 jQuery Uploader 來實(shí)現(xiàn)這樣的效果
請到 Download 下載資源 的 JQueryElement 示例下載一節(jié)下載示例代碼 (腳本之家下載)
本文將說明 Uploader 控件的功能以及使用過程中的注意事項(xiàng)和技巧, 目錄如下:
* 準(zhǔn)備
* 創(chuàng)建保存頁面
* 添加 FileUpload 控件
* 設(shè)置 EnableSessionState
* 調(diào)用 Uploader 的 Save 方法
* 創(chuàng)建獲取進(jìn)度的頁面
* 創(chuàng)建上傳頁面
* 設(shè)置保存頁面
* 設(shè)置獲取進(jìn)度的頁面
* 上傳
* 隱藏保存頁面
<%@ 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 下載一節(jié)下載的壓縮包中包含了一個(gè)自定義樣式的 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>
創(chuàng)建保存頁面
保存頁面是一個(gè)簡單的頁面, 主要完成文件的保存工作, 保存頁面不會(huì)自己提交, 而是由上傳頁面提交.
添加 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 元素, 則可能需要設(shè)置 form 的 enctype 屬性為 multipart/form-data.
設(shè)置 EnableSessionState
需要設(shè)置保存頁面的 EnableSessionState 為 ReadOnly, 這樣可以在保存頁面保存文件時(shí), 請求獲取進(jìn)度的頁面. 這主要是由于, ASP.NET 順序執(zhí)行可以讀寫 Session 的頁面:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="FileUpload.aspx.cs" Inherits="uploader_FileUpload"
EnableSessionState="ReadOnly" %>
調(diào)用 Uploader 的 Save 方法
在保存頁面的 Page_Load 方法中, 調(diào)用 Uploader 控件的 Save靜態(tài)方法來保存文件:
protected void Page_Load ( object sender, EventArgs e )
{
if ( this.IsPostBack && this.file.HasFile )
// TODO: 這里設(shè)置 waitSecond 參數(shù)是為了在測試時(shí)顯示上傳的進(jìn)度,
// 在實(shí)際的使用中請不要設(shè)置 waitSecond, 并調(diào)整 bufferSize 為一個(gè)合理的值.
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 屬性判斷在用戶提交了文件后, 才進(jìn)行保存.
Save 方法的格式為 Save ( string filePath, HttpPostedFile postedFile, Uploader.UploadInfo uploadInfo, int bufferSize, int waitSecond ), filePath 參數(shù)是文件保存的完整路徑, postedFile 參數(shù)是提供文件控制的 HttpPostedFile 對象, 可以從 FileUpload 控件獲取, uploadInfo 參數(shù)是保存上傳進(jìn)度信息的對象, bufferSize 參數(shù)是保存文件時(shí)的緩存大小, 默認(rèn) 128kb 保存一次, 最后一個(gè)參數(shù) waitSecond 只在測試時(shí)使用, 表示緩存被保存后的等待時(shí)間, 這樣可以確保看到進(jìn)度.
上傳大于 4mb 的文件, 請修改 web.config 的 maxRequestLength, 可以參考 http://msdn.microsoft.com/zh-cn/library/e1f13641(v=vs.71).aspx.
創(chuàng)建獲取進(jìn)度的頁面
包含進(jìn)度信息的對象 Uploader.UploadInfo 被保存在 Session 中, 因此可以隨時(shí)從 Session中獲取進(jìn)度信息:
<%@ 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 實(shí)現(xiàn)了接口 IReadOnlySessionState, 而不是 IRequiresSessionState. 原因也是和設(shè)置 EnableSessionState 為 ReadOnly 類似的. 至于如何返回 JSON 數(shù)據(jù), 請參考 在不同的 .NET 版本中返回 JSON.
創(chuàng)建上傳頁面
最后一步就是創(chuàng)建一個(gè)上傳頁面, 在頁面中添加 Uploader控件:
<je:Uploader ID="uploader" runat="server" IsVariable="true"
UploadUrl="FileUpload.aspx"
ProgressUrl="getprec.ashx" ProgressChanged="
function(data){
if(-:data.prec == '-')
$('#prec').text('沒有進(jìn)度!');
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>
設(shè)置保存頁面
通過 Uploader 的 UploadUrl 屬性, 可以選擇保存頁面, 示例中, 選擇了頁面 FileUpload.aspx, 這將自動(dòng)生成一個(gè) iframe 元素, iframe 的 src 屬性指向 FileUpload.aspx 頁面.
也可以自定義一個(gè) iframe, 然后通過 Upload屬性選擇此 iframe:
<iframe id="myIFrame" src="FileUpload.aspx"></iframe>
<je:Uploader ID="uploader" runat="server" IsVariable="true"
Upload="#myIFrame"
... >
</je:Uploader>
設(shè)置獲取進(jìn)度的頁面
通過屬性 ProgressUrl 和 ProgressChanged 可以獲取并顯示上傳進(jìn)度, ProgressUrl 表示返回進(jìn)度信息的頁面地址, ProgressChanged 則用于處理返回的進(jìn)度等信息.
此外 ProgressInterval 屬性表示查詢進(jìn)度的時(shí)間間隔, 默認(rèn)為 1000 毫秒.
上傳
調(diào)用 uploader 的 upload方法, 即可觸發(fā)上傳操作:
<je:Button ID="cmdUpload" runat="server" IsVariable="true"
Label="開始" Click="
function(){
uploader.__uploader('upload');
}">
</je:Button>
默認(rèn)情況下將對保存頁面的第一個(gè)表單執(zhí)行 submit 操作, 可以通過 UploadForm 屬性來調(diào)整需要提交的表單的索引.
隱藏保存頁面
調(diào)用 uploader 的 hide方法, 即可隱藏保存頁面:
uploader.__uploader('upload');
本文將說明 Uploader 控件的功能以及使用過程中的注意事項(xiàng)和技巧, 目錄如下:
* 準(zhǔn)備
* 創(chuàng)建保存頁面
* 添加 FileUpload 控件
* 設(shè)置 EnableSessionState
* 調(diào)用 Uploader 的 Save 方法
* 創(chuàng)建獲取進(jìn)度的頁面
* 創(chuàng)建上傳頁面
* 設(shè)置保存頁面
* 設(shè)置獲取進(jìn)度的頁面
* 上傳
* 隱藏保存頁面
準(zhǔn)備
請確保已經(jīng)在 Download 下載資源 中的 JQueryElement.dll 下載一節(jié)下載 JQueryElement 最新的版本.
請使用指令引用如下的命名空間:
復(fù)制代碼 代碼如下:
<%@ 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 下載一節(jié)下載的壓縮包中包含了一個(gè)自定義樣式的 jQueryUI, 如果需要更多樣式, 可以在 http://jqueryui.com/download 下載:除了命名空間, 還需要引用 jQueryUI 的腳本:
復(fù)制代碼 代碼如下:
<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>
創(chuàng)建保存頁面
保存頁面是一個(gè)簡單的頁面, 主要完成文件的保存工作, 保存頁面不會(huì)自己提交, 而是由上傳頁面提交.
添加 FileUpload 控件
首先, 為保存頁面添加 FileUpload 控件:
復(fù)制代碼 代碼如下:
<form id="formFileUpload" runat="server">
上傳: <asp:FileUpload ID="file" runat="server" />
</form>
也可以添加 type 屬性為 file 的 input 元素:
復(fù)制代碼 代碼如下:
<form id="formFileUpload" runat="server" enctype="multipart/form-data">
上傳: <input type="file" id="file" runat="server" />
</form>
如果使用 input 元素, 則可能需要設(shè)置 form 的 enctype 屬性為 multipart/form-data.
設(shè)置 EnableSessionState
需要設(shè)置保存頁面的 EnableSessionState 為 ReadOnly, 這樣可以在保存頁面保存文件時(shí), 請求獲取進(jìn)度的頁面. 這主要是由于, ASP.NET 順序執(zhí)行可以讀寫 Session 的頁面:
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="FileUpload.aspx.cs" Inherits="uploader_FileUpload"
EnableSessionState="ReadOnly" %>
調(diào)用 Uploader 的 Save 方法
在保存頁面的 Page_Load 方法中, 調(diào)用 Uploader 控件的 Save靜態(tài)方法來保存文件:
復(fù)制代碼 代碼如下:
protected void Page_Load ( object sender, EventArgs e )
{
if ( this.IsPostBack && this.file.HasFile )
// TODO: 這里設(shè)置 waitSecond 參數(shù)是為了在測試時(shí)顯示上傳的進(jìn)度,
// 在實(shí)際的使用中請不要設(shè)置 waitSecond, 并調(diào)整 bufferSize 為一個(gè)合理的值.
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 屬性判斷在用戶提交了文件后, 才進(jìn)行保存.
Save 方法的格式為 Save ( string filePath, HttpPostedFile postedFile, Uploader.UploadInfo uploadInfo, int bufferSize, int waitSecond ), filePath 參數(shù)是文件保存的完整路徑, postedFile 參數(shù)是提供文件控制的 HttpPostedFile 對象, 可以從 FileUpload 控件獲取, uploadInfo 參數(shù)是保存上傳進(jìn)度信息的對象, bufferSize 參數(shù)是保存文件時(shí)的緩存大小, 默認(rèn) 128kb 保存一次, 最后一個(gè)參數(shù) waitSecond 只在測試時(shí)使用, 表示緩存被保存后的等待時(shí)間, 這樣可以確保看到進(jìn)度.
上傳大于 4mb 的文件, 請修改 web.config 的 maxRequestLength, 可以參考 http://msdn.microsoft.com/zh-cn/library/e1f13641(v=vs.71).aspx.
創(chuàng)建獲取進(jìn)度的頁面
包含進(jìn)度信息的對象 Uploader.UploadInfo 被保存在 Session 中, 因此可以隨時(shí)從 Session中獲取進(jìn)度信息:
復(fù)制代碼 代碼如下:
<%@ 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 實(shí)現(xiàn)了接口 IReadOnlySessionState, 而不是 IRequiresSessionState. 原因也是和設(shè)置 EnableSessionState 為 ReadOnly 類似的. 至于如何返回 JSON 數(shù)據(jù), 請參考 在不同的 .NET 版本中返回 JSON.
創(chuàng)建上傳頁面
最后一步就是創(chuàng)建一個(gè)上傳頁面, 在頁面中添加 Uploader控件:
復(fù)制代碼 代碼如下:
<je:Uploader ID="uploader" runat="server" IsVariable="true"
UploadUrl="FileUpload.aspx"
ProgressUrl="getprec.ashx" ProgressChanged="
function(data){
if(-:data.prec == '-')
$('#prec').text('沒有進(jìn)度!');
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>
設(shè)置保存頁面
通過 Uploader 的 UploadUrl 屬性, 可以選擇保存頁面, 示例中, 選擇了頁面 FileUpload.aspx, 這將自動(dòng)生成一個(gè) iframe 元素, iframe 的 src 屬性指向 FileUpload.aspx 頁面.
也可以自定義一個(gè) iframe, 然后通過 Upload屬性選擇此 iframe:
復(fù)制代碼 代碼如下:
<iframe id="myIFrame" src="FileUpload.aspx"></iframe>
<je:Uploader ID="uploader" runat="server" IsVariable="true"
Upload="#myIFrame"
... >
</je:Uploader>
設(shè)置獲取進(jìn)度的頁面
通過屬性 ProgressUrl 和 ProgressChanged 可以獲取并顯示上傳進(jìn)度, ProgressUrl 表示返回進(jìn)度信息的頁面地址, ProgressChanged 則用于處理返回的進(jìn)度等信息.
此外 ProgressInterval 屬性表示查詢進(jìn)度的時(shí)間間隔, 默認(rèn)為 1000 毫秒.
上傳
調(diào)用 uploader 的 upload方法, 即可觸發(fā)上傳操作:
復(fù)制代碼 代碼如下:
<je:Button ID="cmdUpload" runat="server" IsVariable="true"
Label="開始" Click="
function(){
uploader.__uploader('upload');
}">
</je:Button>
默認(rèn)情況下將對保存頁面的第一個(gè)表單執(zhí)行 submit 操作, 可以通過 UploadForm 屬性來調(diào)整需要提交的表單的索引.
隱藏保存頁面
調(diào)用 uploader 的 hide方法, 即可隱藏保存頁面:
復(fù)制代碼 代碼如下:
uploader.__uploader('upload');
JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.
實(shí)際過程演示: http://www.tudou.com/programs/view/-Zvwz5xsih8/, 建議全屏觀看.
歡迎訪問 panzer 開源項(xiàng)目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執(zhí)行各種 js 和 jQuery 腳本以及錄制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement, 微博: http://t.qq.com/zoyobar
您可能感興趣的文章:
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jQuery Ajax文件上傳(php)
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
- jQuery文件上傳插件Uploadify使用指南
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- js jquery分別實(shí)現(xiàn)動(dòng)態(tài)的文件上傳操作按鈕的添加和刪除
- jQuery頁面彈出框?qū)崿F(xiàn)文件上傳
相關(guān)文章
遞歸輸出ASP.NET頁面所有控件的類型和ID的代碼，需要的朋友可以參考下。2012-01-01
asp.net 獲取目錄下的文件數(shù)和文件夾數(shù)
遍歷一個(gè)文件夾中的文件，需要用到DirectoryInfo類中的一個(gè)重要的方法GetFileSystemInfos()，此方法返回指定的是與搜索條件相匹配的文件和子目錄的強(qiáng)類型 FileSystemInfo對象的數(shù)組。2010-07-07
這篇文章主要為大家詳細(xì)介紹了NetCore1.1+Linux部署的初體驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了ASP.NET微信公眾號(hào)添加菜單的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
在asp.net中使用加密數(shù)據(jù)庫聯(lián)接字符串保證數(shù)據(jù)安全
加密web.config可以有效保證數(shù)據(jù)庫用戶和密碼安全,下面是示例代碼，大家可以看看2014-09-09
干貨來襲! 為大家分享了C# 7.0 新特性，VS2017可用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
最近做了一個(gè) 在線文件管理程序，支持瀏覽服務(wù)器所有文件（不單單是站點(diǎn)的文件）。2009-11-11
Visual Studio 2017新版發(fā)布 更強(qiáng)大!
Visual Studio 2017新版發(fā)布 更強(qiáng)大!對Visual Studio 2017感興趣的小伙伴們可以參考一下2017-05-05
在編寫 ASP.NET 應(yīng)用程序的時(shí)候，有時(shí)為了更好地進(jìn)行控制靜態(tài)文件的路徑，如在模板頁或者用戶控件中設(shè)置js或者css文件的路徑等，采用絕對路徑是難免的。下面就是幾種獲取絕對路徑的幾種方法2014-02-02
大型門戶網(wǎng)站實(shí)現(xiàn)的十四大技術(shù)小結(jié)
參考下大型門戶網(wǎng)站的技術(shù)，大家可以盡量的備份好服務(wù)器。2010-10-10