jquery组件WebUploader文件上传用法详解

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法。

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置，以及多个事件方法可调用，你可以随心所欲的定制你要的上传组件。



接下来我以图片上传实例，给大家讲解如何使用WebUploader。

HTML

我们首先将css和相关js文件加载。

?
然后我们需要准备一个按钮#imgPicker，和一个用来存放添加的文件信息列表的容器#fileList，在body中加入如下代码：

?
JAVASCRIPT

首先创建Web Uploader实例：

?
接着监听fileQueued事件，即当有文件添加进来的时候，通过uploader.makeThumb来创建图片预览图。

?
最后是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess,

uploadError, uploadComplete事件。

?
到这里，我们就实现了一个简单的图片上传实例，点击“选择图片”会弹出文件选择对话框，当选择图片后，即进入上传图片流程，会将图片对应的缩略图现实在列表里。

常用选项设置与事件调用

Web Uploader提供了丰富的API选项设置与事件调用。





常用的事件说明：



更多精彩内容，请点击《jQuery上传操作汇总》，《ajax上传技术汇总》进行深入学习和研究。