提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

Web Uploader学习及使用


前言

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

一、具体使用

1.引入库

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

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定,在后面将展示-->

2.前端代码

<div id="upload-container">
    <span>点击或者拖拽到此处上传</span>
</div>
<span id="picker" class="showclass">点击上传文件</span>

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中保存数据:
在这里插入图片描述
前端调用:

    uploader.on('uploadSuccess', function(file, response) {
        if(response.status===1){
            alert("导入成功!")
        }else{
            alert("excel表里有数据未导入到数据库,请检查表中数据是否与您所选择项一致!!!!")
        }
    });

二、其他辅助功能

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'));
});

6.上传完成

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

7.刷新容器(解决文件上传按钮失效问题)

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

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

总结

作为一个刚刚毕业步入职场的小白,接到的第一个需求就是开发数据导入功能,Web Uploader真的是一个很好文件上传的组件,为完成我人生中第一个需求提供了很大的帮助

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐