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

请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码 (我们下载)
本文将说明 Uploader 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 创建保存页面
* 添加 FileUpload 控件
* 设置 EnableSessionState
* 调用 Uploader 的 Save 方法
* 创建获取进度的页面
* 创建上传页面
* 设置保存页面
* 设置获取进度的页面
* 上传
* 隐藏保存页面


准备
请确保已经在 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

时间: 2011-12-21

php+jQuery.uploadify实现文件上传教程

这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码 代码如下: <!

js jquery分别实现动态的文件上传操作按钮的添加和删除

javascript实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

jQuery文件上传插件Uploadify使用指南

对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码 代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&

jQuery Ajax文件上传(php)

如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

jQuery实现文件上传进度条特效

上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太

jQuery页面弹出框实现文件上传

如图所示,点击新增,弹出如图的弹出框,点击取消不保存页面信息,点击确定保存页面信息 在前台页面添加一个标签,任何都可以 <div class="btn btn-default" id="divadd">新增</div> 写弹出框页面 <div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; righ

Jquery结合HTML5实现文件上传

1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如

Jquery Uploadify多文件上传带进度条且传递自己的参数

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r

分享20多个很棒的jQuery 文件上传插件或教程

1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

jquery插件ajaxupload实现文件上传操作

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp

jQuery插件WebUploader实现文件上传

最近在项目中用到了百度的文件图片上传插件WebUploader,分享给大家. WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 需要在http://fex.baidu

基于Ajaxupload的多文件上传操作

废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="php"><?php $ele = $_GET['ele']; $file = $_FILES['thumb_'.$ele]; $pathinfo = pathinfo($file['name']); $filedir = 'uploads/' . date('Y'); if (!is_dir($filedir)) { mkdir($filedir

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

jQuery+ajax简单实现文件上传的方法

本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

Bootstrap的fileinput插件实现多文件上传的方法

*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov

PHP文件上传操作实例详解

本文实例分析了PHP文件上传操作.分享给大家供大家参考,具体如下: 文件上传 发生在浏览器向服务器发出的请求中. 文件,对于浏览器来讲,就是表单中的一个特殊类型的数据而已. 浏览器表单中的数据,两种类型: 字符串类型(字节流编码) 文件类型(二进制编码),文件是表单数据中一部分 服务器角度: 在接受浏览器请求时,处理好表单内的数据.根据数据类型不同使用不同处理方法: 字符串类型,存储在$_POST变量中(内存) 文件型数据,存储在上传临时目录中 表单提交时,浏览器会默认的行为: 表单内的的内容都

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)

<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images