WebUploader用于文件的上传。文件上传过程为:
网页中点击上传按钮→弹出选择文件窗口,并选择一个文件→在网页中显示选中的内容,给使用者一个反馈→点击上传按钮,文件开始上传,同时服务端开始接收文件。
对于服务端而言,框架往往都有自己的接收文件API,只需要提供一个访问接口,然后令前端控件上传时调用该接口即可。
对于前端而言,最主要的部分有两个:
1. 弹窗选择文件。
2. 将选择的文件传给服务端。
这也是WebUploader所实现的功能。
因此,对于WebUploader而言,最简单的情况,其实只需要提供一个按钮,WebUploader将此按钮转换为弹窗选择按钮。然后调用WebUploader的API来上传即可。
至于选中的文件名/缩略图,上传进度,以及各种事件处理,可以自定义元素来显示/处理。WebUploader并没有提供UI相关的封装,唯一的UI是选择文件按钮会被转换成一个蓝色底色按钮。这个可以通过自定义style来修改。
使用步骤:
1. 引入css和js。
2. 准备一个元素用于转换为选择文件按钮。通常用<div>:
<div id="picker" ></div>
3. 在js中初始化对象:
var uploader = WebUploader.create({
// swf文件路径
swf: '${contextPath}/resource/css/Uploader.swf',
// 文件接收服务端。
server: '${contextPath}/supply/upload',
// 选择文件的按钮。可选。
// 内部根据当前运行时创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false
});
注意其中的pick属性,其值为2中所准备元素的id。
4. 选择了一个文件后,需要上传时,调用:
uploader.upload();
即可。
除了uploader.upload(),常用的函数还有:uploader.reset(),其作用是重置内部的选择文件列表。
一个文件是不能被重复选择的,这是因为每次选择文件并向列表中添加时,会进行判重。
事件和其他函数具体参考官方文档:
http://fex.baidu.com/webuploader/doc/index.html