Web Uploader学习及使用

前言

Web Uploader百度插件的使用：Web Uploader是一个高效的文件上传组件，网址链接为：[Web Uploader百度插件(http://fex.baidu.com/webuploader/)

一、具体使用

1.引入库

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

编辑

2.前端代码

编辑

3.初始化

从前端代码可以看出上传文件为一个span文本，Web Uploader将其初始化成为
一个可以上传文件的按钮

//webload
$('#upload-container').click(function(event) {
$("#picker").find('input').click();
});

var uploader = WebUploader.create({
auto: true,// 选完文件后，是否自动FF上传。
swf: 'assets/global/plugins/webuploader/Uploader.swf',// swf文件路径
server: 'rest/excel/importCostExcelImport',// 文件接收服务端。
dnd: '#upload-container',
pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
// multiple: false, // 选择多个
// chunked: false,// 开起分片上传。
// threads: 1, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式，POST或者GET。
fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileVal:'file', // [默认值：'file'] 设置文件上传域的name，后端接收
duplicate :true,//允许重复上传
formData:{
},
});

4.接收后端响应的数据

与后端的联动具体实现：
后端数组用来保存响应后上传的数据

编辑

Map中保存数据：

编辑

前端调用：

编辑

二、其他辅助功能

1.添加文件到队列时

uploader.on( 'fileQueued', function( file ) {
// 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
console.log(file.ext) // 获取文件的后缀
console.log(file.size) // 获取文件的大小
console.log(file);
});

2.文件上传过程中添加进度显示

uploader.on( 'uploadProgress', function( file, percentage ) {
console.log(percentage * 100 + '%');
});

3.文件上传成功或失败时触发

uploader.on( 'uploadSuccess', function( file,response ) {
console.log(file.id+"传输成功");
});

uploader.on( 'uploadError', function( file ) {
console.log(file);
console.log(file.id+'upload error')
});

4.取消上传或者重新上传

$('.upload-list').on('click', '.btn-remove', function(){
// 从文件队列中删除某个文件id
file_id = $(this).data('id');
uploader.removeFile(file_id, true); // 从队列中删除
// console.log(uploader.getFiles()) // 队列显示还在其实已经删除
});

$('.upload-list').on('click', '.upload-item__progress span', function(){
uploader.retry($(this).data('file'));
});

5.上传完成

uploader.on( 'uploadComplete', function( file ) {
console.log(uploader.getFiles());
});

6.刷新容器（解决文件上传按钮失效问题）

有时需要根据需求进行文件上传按钮的隐藏和显示，
当文件按钮隐藏再显示后会出现功能失效的问题，此时可以通过刷新容器来实现

$(function () {
$("#picker").hide();
$('#forecastSelect4').change(function(){
$("#picker").show();
uploader.refresh();//刷新容器解决隐藏后失效问题
});
});

最后效果：