<%@ WebHandler Language="C#" %>
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 runat="server" IsVariable="true"
UploadUrl="https://www.jb51.net/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 runat="server" IsVariable="true"
Label="开始">
</je:Button>
设置保存页面
通过 Uploader 的 UploadUrl 属性, 可以选择保存页面, 示例中, 选择了页面 FileUpload.aspx, 这将自动生成一个 iframe 元素, iframe 的 src 属性指向 FileUpload.aspx 页面.
也可以自定义一个 iframe, 然后通过 Upload属性选择此 iframe:
复制代码 代码如下:
<iframe src="https://www.jb51.net/FileUpload.aspx"></iframe>
<je:Uploader runat="server" IsVariable="true"
Upload="#myIFrame"
... >
</je:Uploader>
设置获取进度的页面
通过属性 ProgressUrl 和 ProgressChanged 可以获取并显示上传进度, ProgressUrl 表示返回进度信息的页面地址, ProgressChanged 则用于处理返回的进度等信息.
此外 ProgressInterval 属性表示查询进度的时间间隔, 默认为 1000 毫秒.
上传
调用 uploader 的 upload方法, 即可触发上传操作:
复制代码 代码如下:
<je:Button runat="server" IsVariable="true"
Label="开始">
</je:Button>
默认情况下将对保存页面的第一个表单执行 submit 操作, 可以通过 UploadForm 属性来调整需要提交的表单的索引.
隐藏保存页面
调用 uploader 的 hide方法, 即可隐藏保存页面:
复制代码 代码如下:
uploader.__uploader('upload');
JQueryElement 是开源共享的代码, 可以在 页面下载 dll 或者是源代码.
欢迎访问 panzer 开源项目, , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement, 微博:
您可能感兴趣的文章: