当前位置：首页 > 资讯 > 技术文档

使用jQuery Uploader显示文件上传进度

时间：2020-11-15 05:21 编辑：来源：阅读：
扫一扫，手机访问

摘要：使用jQuery Uploader显示文件上传进度

请到 [url=http://code.google.com/p/zsharedcode/wiki/Download]Download 下载资源[/url] 的 JQueryElement 示例下载一节下载示例代码 ([url=http://xiazai.jb51.net/201112/yuanma/JQueryElementDemo.rar]编程素材网下载[/url]) 本文将说明 Uploader 控件的功能以及使用过程中的注意事项和技巧, 目录如下: * 准备 * 创建保存页面 * 添加 FileUpload 控件 * 设置 EnableSessionState * 调用 Uploader 的 Save 方法 * 创建获取进度的页面 * 创建上传页面 * 设置保存页面 * 设置获取进度的页面 * 上传 * 隐藏保存页面 [img]http://files.jb51.net/upload/201112/20111222221624131.jpg[/img] [img]http://files.jb51.net/upload/201112/20111222221624844.jpg[/img] [img]http://files.jb51.net/upload/201112/20111222221624590.jpg[/img] 准备请确保已经在 Download 下载资源中的 JQueryElement.dll 下载一节下载 JQueryElement 最新的版本. 请使用指令引用如下的命名空间:

[url=[样式路径]/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 控件:

[u]复制代码[/u][/url] 代码如下:

也可以添加 type 属性为 file 的 input 元素:

[url=http://code.google.com/p/zsharedcode/wiki/AjaxReturnJSON]在不同的 .NET 版本中返回 JSON[/url]. [b]创建上传页面[/b] 最后一步就是创建一个上传页面, 在页面中添加 Uploader控件:

[url=http://code.google.com/p/zsharedcode/wiki/Download]http://code.google.com/p/zsharedcode/wiki/Download[/url] 页面下载 dll 或者是源代码. [b]实际过程演示: [url=http://www.tudou.com/programs/view/-Zvwz5xsih8/]http://www.tudou.com/programs/view/-Zvwz5xsih8/[/url][/b], 建议全屏观看.

欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能和 jQueryUI 的 Asp.net 控件 JQueryElement, 微博: http://t.qq.com/zoyobar