WebUploader文件上传插件

一觉睡到小时候

发布于 2019-07-04 17:31:20

3.8K3

发布于 2019-07-04 17:31:20

文章被收录于专栏：国产程序员

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

官方文档：http://fex.baidu.com/webuploader/doc/?qq-pf-to=pcqq.group

各个参数的说明文档中都有，可以详细参考一下文档，再这里给大家列出一个上传文件的实现，如有不足的地方希望大家指出，谢谢。

首先引如外部资源 css，js文件：

这里${ctxStatic}不要管，这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话，测试的话直接写死绝对路即可。

<link href="${ctx}/css/plugins/webuploader/webuploader.css"rel="stylesheet">

<script src="${ctx}/js/plugins/webuploader/webuploader.min.js"></script>

引入bootstrap的js

<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.js"></script>

接着写容器的DOM

<div class="form-horizontal"> <div class="form-group"> <label class="col-sm-3control-label">选择文件</label> <div class="col-sm-3"> <label id="picker">选择文件</label> </div> <div class="col-sm-6"> <input id="uploadBtn"type="button" value="上传文件" class="btnbtn-success"/> <input id="fileName" type="hidden" name="fileName"> <input id="configPreName"type="hidden" name="configPreName" value="tracingUpload"> <button id="clearBtn" class="btnbtn-warning" type="button">清空上传文件 </button> </div> </div> </div> <div class="form-horizontal"> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-6">  <div id="thelist" class="uploader-list"></div> </div> </div>

最后初始化webuploader组件，设置上传等事件监听。

/**
     * 上传文件方法
     */

    function uploadFiles() {

        var $list = $('#thelist'),
            $btn = $('#uploadBtn'),
            $clearBtn = $('#clearBtn'),
            state = 'pending';
        var configPreName = $('#configPreName').val();
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '/js/plugins/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/documents/file/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 上传文件格式，可支持多种格式
            accept: {
                title: 'Files',
                extensions: 'gif,jpg,jpeg,bmp,png,pdf,doc,docx,txt,xls,xlsx,ppt,pptx,zip,mp3,mp4,text,csv',
                mimeTypes: 'image/*,text/*'
                //word
                + ',application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                //excel
                + ',application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                //ppt
                + ',application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'
                + ',application/pdf'
                + ',application/zip'
                + ',application/csv'
            }
        });


// 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            var files = uploader.getFiles();
            for (var i = 0; i < files.length - 1; i++) {
                uploader.removeFile(files[i], true);
            }
            $list.html('');
            $list.append('<div id="' + file.id + '">' +
                '<h4>' + file.name + '</h4>' +
                '<p>单击上传按钮开始上传...</p>' +
                '</div>');
        });
// 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file, response) {
            if (response.msgCode == 'success') {
                toastr.success("", response.message);
                //后续显示处理，另行增加            }
            if (response.msgCode == 'fail') {
                toastr.warning("", response.message);
            }
            var files = uploader.getFiles();
            for (var i = 0; i < files.length; i++) {
                uploader.removeFile(files[i], true);
            }
            $list.html('');
         });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('导入');
            }
        });

//上传
        $btn.on('click', function () {

if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } }); //清空 $clearBtn.on('click', function () { //alert(state); var files = uploader.getFiles(); for (var i = 0; i < files.length; i++) { uploader.removeFile(files[i], true); } $list.html(''); }); }