WebUploader使用

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