jquery组件WebUploader文件上传用法详解(jquery filedownload)

推荐整理分享jquery组件WebUploader文件上传用法详解(jquery filedownload)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery warp,jqueryfileupload教程,jqueryfileupload,jquery upload,jquery ui组件,jquery.upload.js,jqueryfileupload,jquery.upload.js,内容如对您有帮助，希望把文章链接给更多的朋友！

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上传技术汇总》进行深入学习和研究。