Web Uploader学习及使用

前言

Web Uploader百度插件的使用：Web Uploader是一个高效的文件上传组件

一、具体使用

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();//刷新容器 解决隐藏后失效问题
       });
   });

最后效果：

  示例下载：

  asp.net：https://gitee.com/xproer/asp-net/tree/6.5.38/

 jsp-eclipse：https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

 jsp-myeclipse：https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

 jsp-springboot：https://gitee.com/xproer/jsp-springboot/tree/6.5.38/

 php：https://gitee.com/xproer/php/tree/6.5.38/

 vue-cli：https://gitee.com/xproer/vue-cli

 详细配置信息及思路