基于WebUploader的文件上传插件
首先把地址甩出来，http://fex-team.github.io/webuploader/
里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件
首先是文件上传
jQuery(function() {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
//初始化，实际上可直接访问Webuploader.upLoader
uploader = WebUploader.create({
// 不压缩image
resize: false,
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
// 发送给后台代码进行处理，保存到服务器上
server: '/server/fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker'
// uploader添加事件，当文件被加入队列后触发
uploader.on( 'fileQueued', function( file ) {
//在加入队列时，创建一个样式，供后面上传成功失败等等调用，定义一个*p表示指向该事件样式
$list.append( '&div id=&' + file.id + '& class=&item&&' +
'&h4 class=&info&&' + file.name + '&/h4&' +
'&p class=&state&&等待上传...&/p&' +
'&/div&' );
// 文件上传过程中触发，携带上传进度，file表示上传的文件，percentage表示上传的进度
uploader.on( 'uploadProgress', function( file, percentage ) {
//定义一个变量名创建进度模块
var $li = $( '#'+file.id ),
//找到$li下class为progress的，并定义为$percent------为什么先寻找在创建
$percent = $li.find('.progress .progress-bar');
//如果$percent没值，就创建进度条加入到对应的文件名下， 避免重复创建
if ( !$percent.length ) {
$percent = $('&div class=&progress progress-striped active&&' +
'&div class=&progress-bar& role=&progressbar& style=&width: 0%&&' +
'&/div&' +
'&/div&').appendTo( $li ).find('.progress-bar');
//为进度模块添加弹出文本
$li.find('p.state').text('上传中');
//为进度模块创建读条的百分比
$percent.css( 'width', percentage * 100 + '%' );
//uploader触发事件，当上传成功事调用这个事件
uploader.on( 'uploadSuccess', function( file ) {
//调用文件被加入时触发的事件，findstate，并添加文本为已上传
$( '#'+file.id ).find('p.state').text('已上传');
//uploader触发事件，当上传失败时触发该事件
uploader.on( 'uploadError', function( file ) {
//调用文件被加入时触发的事件，findstate，并添加文本为上传出错
$( '#'+file.id ).find('p.state').text('上传出错');
//该事件表示不管上传成功还是失败都会触发该事件
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
//这是一个特殊事件，所有的触发都会响应到，type的作用是记录当前是什么事件在触发，并给state赋值
uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
//根据state判断弹出文本
if ( state === 'uploading' ) {
$btn.text('暂停上传');
$btn.text('开始上传');
//当按钮被点击时触发，根据状态开始上传或是暂停
$btn.on( 'click', function() {
if ( state === 'uploading' ) {
uploader.stop();
uploader.upload();
然后是图片上传
jQuery(function() {
//将jquery赋值给一个全局的变量
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2，设备像素比
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传。
auto: true,
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
// 文件接收服务端。调用代码，把图片保存在服务器端
server: '/server/fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择文件，可选。
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
// 当有文件添加进来的时候触发这个事件
uploader.on( 'fileQueued', function( file ) {
//定义变量li
var $li = $(
//创建一个id
'&div id=&' + file.id + '& class=&file-item thumbnail&&' +
'&img&' +
//创建一个为info的class
'&div class=&info&&' + file.name + '&/div&' +
'&/div&'
$img = $li.find('img');
//把定义的li加入到list中
$list.append( $li );
// 创建缩略图，此过程为异步，需要传入callBack（function( error, src ))，通常在图片加入队列后调用此方法，以增强交互性
//callback有两个参数，当失败时调用error，src存放的是缩略图的地址
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('&span&不能预览&/span&');
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('&p class=&progress&&&span&&/span&&/p&')
.appendTo( $li )
.find('span');
$percent.css( 'width', percentage * 100 + '%' );
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done');
// 文件上传失败，现实上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('&div class=&error&&&/div&').appendTo( $li );
$error.text('上传失败');
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器
http://blog.csdn.net/zsw2zkl/article/details/7426007
package com.lanyou.support.
import java.io.F
import java.io.IOE
import java.io.PrintW
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import net.sf.json.JSONO
import mons.fileupload.FileI
import mons.fileupload.FileItemF
import mons.fileupload.disk.DiskFileItemF
import mons.fileupload.servlet.ServletFileU
import mons.logging.L
import mons.logging.LogF
import org.apache.struts2.ServletActionC
public class FileUpload extends HttpServlet {
private static final long serialVersionUID = 1L;
private static Log logger = LogFactory.getLog(FileUpload.class);
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 类型 1事件上传文件 2apk
String t = req.getParameter(&t&) == null ? &1& : req.getParameter(&t&)
String path = &&;
JSONObject ob = new JSONObject();
//将请求消息中的每一个项目封装成单独DiskFileItem对象的任务
//当上传的文件项目比较小时保存在内存中，比较大时保存在磁盘零时文件夹中
//建立文件仓库(工厂)
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
//对上传的文件进行设定
servletFileUpload.setSizeMax(1024 * 1024 * 2);// 最大2M数据
servletFileUpload.setFileSizeMax(2 * 1024 * 1024);
servletFileUpload.setHeaderEncoding(&UTF-8&);// 解决文件名乱码的问题
//解析请求正文，获取上传文件，不抛出异常则写入真实路径
//根据请求获取文件列表
List&FileItem& fileItemsList = servletFileUpload.parseRequest(req);
//从文件列表中取出单独的文件对象
for (FileItem item : fileItemsList) {
//判断该文件是否是普通的表单类型，该处是file类型进入判断
if (!item.isFormField()) {
//如果上传的文件大于指定的大小则return
if (item.getSize() & 2 * 1024 * 1024) {
// System.out.println(&上传文件的大小：&+item.getSize());
// System.out.println(&上传文件的类型：&+item.getContentType());
// System.out.println(&上传文件的名称：&+item.getName());
//上传文件的名称
String fileName = item.getName();
String ent = &&;
//内容的类型
if (item.getContentType().equalsIgnoreCase(&image/x-png&)
|| item.getContentType().equalsIgnoreCase(
&image/png&)) {
ent = &.png&;
} else if (item.getContentType().equalsIgnoreCase(
&image/gif&)) {
ent = &.gif&;
} else if (item.getContentType().equalsIgnoreCase(
&image/bmp&)) {
ent = &.bmp&;
} else if (item.getContentType().equalsIgnoreCase(
&image/pjpeg&)
|| item.getContentType().equalsIgnoreCase(
&image/jpeg&)) {
ent = &.jpg&;
//获取文件的是那种格式
if (fileName.lastIndexOf(&.&) != -1) {
ent = fileName.substring(fileName.lastIndexOf(&.&));
fileName = &ev_& + System.currentTimeMillis() +
// 定义文件路径，根据你的文件夹结构，可能需要做修改
if (t.equals(&1&)) {
path = &upload/ev/& + fileN
path = &upload/pk/& + fileN
// 保存文件到服务器上
File file = new File(req.getSession().getServletContext()
.getRealPath(path));
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
item.write(file);
// (path);
ob.accumulate(&url&, path);
resp.setContentType(&text/ charset=UTF-8&);
resp.getWriter().write(ob.toString());
} catch (Exception e) {
e.printStackTrace();
} finally {
// 响应客户端
// resp.setContentType(&text/ charset=UTF-8&);
// resp.getWriter().write(ob.toString());2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
功能强大的文件上传组件-WebUploader
导读：WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又...
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用老的FLASH运行时，兼容PC和移动端。它最大的特点是采用大文件分片并发上传，极大的提高了文件上传效率。
使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置，以及多个事件方法可调用，你可以随心所欲的定制你要的上传组件。
接下来我以图片上传实例，给大家讲解如何使用WebUploader。
我们首先将css和相关js文件加载。
&rel=&stylesheet&&type=&text/css&&href=&css/webuploader.css&&
&src=&/jquery/1.12.4/jquery.min.js&&
&type=&text/javascript&&src=&js/webuploader.min.js&
然后我们需要准备一个按钮#imgPicker，和一个用来存放添加的文件信息列表的容器#fileList，在body中加入如下代码：
&id=&uploadimg&&
&&&&&id=&fileList&&class=&uploader-list&&
&&&&&id=&imgPicker&选择图片&
JAVASCRIPT
首先创建Web Uploader实例：
&uploader&=&WebUploader.create({&
&&&&auto:&true,&&
&&&&swf:&'js/Uploader.swf',&&
&&&&server:&'upload.php',&&
&&&&pick:&'#imgPicker',&&
&&&&accept:&{&
&&&&&&&&title:&'Images',&
&&&&&&&&extensions:&'gif,jpg,jpeg,bmp,png',&
&&&&&&&&mimeTypes:&'image/*'&
接着监听fileQueued事件，即当有文件添加进来的时候，通过uploader.makeThumb来创建图片预览图。
uploader.on(&'fileQueued',&function(&file&)&{&
&&&&&$list&=&$(&#fileList&),&
&&&&&&&&$li&=&$(&
&&&&&&&&&&&&'&div&id=&'&+&file.id&+&'&&class=&file-item&thumbnail&&'&+&
&&&&&&&&&&&&&&&&'&img&'&+&
&&&&&&&&&&&&&&&&'&div&class=&info&&'&+&file.name&+&'&/div&'&+&
&&&&&&&&&&&&'&/div&'&
&&&&&&&&&&&&),&
&&&&&&&&$img&=&$li.find('img');&
&&&&$list.append(&$li&);&
&&&&uploader.makeThumb(&file,&function(&error,&src&)&{&
&&&&&&&&&(&error&)&{&
&&&&&&&&&&&&$img.replaceWith('&span&不能预览&/span&');&
&&&&&&&&&&&&;&
&&&&&&&&}&
&&&&&&&&$img.attr(&'src',&src&);&
&&&&},&100,&100&);&&
最后是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
uploader.on(&'uploadProgress',&function(&file,&percentage&)&{&
&&&&&$li&=&$(&'#'+file.id&),&
&&&&&&&&$percent&=&$li.find('.progress&span');&
&&&&&(&!$percent.length&)&{&
&&&&&&&&$percent&=&$('&p&class=&progress&&&span&&/span&&/p&')&
&&&&&&&&&&&&&&&&.appendTo(&$li&)&
&&&&&&&&&&&&&&&&.find('span');&
&&&&$percent.css(&'width',&percentage&*&100&+&'%'&);&
uploader.on(&'uploadSuccess',&function(&file,&res&)&{&
&&&&console.log(res.filePath);&
&&&&$(&'#'+file.id&).addClass('upload-state-done');&
uploader.on(&'uploadError',&function(&file&)&{&
&&&&&$li&=&$(&'#'+file.id&),&
&&&&&&&&$error&=&$li.find('div.error');&
&&&&&(&!$error.length&)&{&
&&&&&&&&$error&=&$('&div&class=&error&&&/div&').appendTo(&$li&);&
&&&&$error.text('上传失败');&
uploader.on(&'uploadComplete',&function(&file&)&{&
&&&&$(&'#'+file.id&).find('.progress').remove();&
到这里，我们就实现了一个简单的图片上传实例，点击&选择图片&会弹出文件选择对话框，当选择图片后，即进入上传图片流程，会将图片对应的缩略图现实在列表里。
常用选项设置与事件调用
Web Uploader提供了丰富的API选项设置与事件调用。
[可选] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
disableGlobalDnd
[可选] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
[可选], Object,指定选择文件的按钮容器，不指定则不创建按钮。
& & & & & &id {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
label {String} 请采用 innerHTML 代替 innerHTML {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
multiple {Boolean} 是否开起同时选择多个文件能力。
[可选] 指定可接受的文件类型。
title {String} 文字描述
extensions {String} 允许的文件后缀，不带点，多个用逗号分割。
mimeTypes {String} 多个用逗号分割。
{Object} [可选] 配置生成缩略图的选项。
{Object} [可选] 配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。
[可选] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
runtimeOrder
[可选] 指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash. 可以将此值设置成 flash，来强制使用 flash 运行时。
html5,flash
[可选] 是否要分片处理大文件上传。
[可选] 如果要分片，分多大一片？ 默认大小为5M.
chunkRetry
[可选]如果某个分片由于网络问题出错，允许自动重传次数。
[可选] 上传并发数。允许同时最大上传进程数。
[可选]文件上传请求的参数表，每次发送都会发送此对象中的参数。
[可选] 设置文件上传域的name。
fileNumLimit
[可选] 验证文件总数量, 超出则不允许加入队列。
fileSizeLimit
[可选] 验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit
[可选] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
[可选] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
常用的事件说明：
beforeFileQueued
file&{File}File对象
当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
fileQueued
file&{File}File对象
当文件被加入队列以后触发。
filesQueued
file&{File}数组，内容为原始File(lib/File）对象。
当一批文件添加进队列以后触发。
fileDequeued
file&{File}File对象
当文件被移除队列后触发。
uploadStart
file&{File}File对象
某个文件开始上传前触发，一个文件只会触发一次。
uploadBeforeSend
object&{Object}
data&{Object}默认的上传参数，可以扩展此对象来控制上传参数。
headers&{Object}可以扩展此对象来控制上传头部。
当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploadProgress
file&{File}File对象
percentage&{Number}上传进度
上传过程中触发，携带上传进度。
uploadError
file&{File}File对象
reason&{String}出错的code
当文件上传出错时触发。
uploadSuccess
file&{File}File对象
response&{Object}服务端返回的数据
当文件上传成功时触发。
uploadComplete
file&{File} [可选]File对象
不管成功或者失败，文件上传完成时触发。
PHP处理文件上传
upload.php接收上传数据，将上传的文件保存到服务器相关目录，并将上传结果告知前端上传组件。
这里值得一提的是，如果设置了大文件分片上传，PHP将每次上传的小文件片临时保存，等最后文件片全部接收完毕后再将这些临时文件片组合，成为一个完整的大文件。
webuploader的分片上传是把文件分成若干份，然后向你定义的文件接收端post数据，如果上传的文件大于分片的尺寸，就会进行分片，然后会在post的数据中添加两个form元素chunk和chunks，前者标示当前分片在上传分片中的顺序（从0开始），后者代表总分片数。
关于upload.php中的代码，这里就不贴出来了，大家可以下载源码来学习。
Web Uploader项目的官网地址：
转载请注明（B5教程网）原文链接：
网友评论：