使用webuploader进行文件上传

一、webuploader概要

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。
官网：http://fex.baidu.com/webuploader/

二、webuploader使用

• 在官网下载包后导入css,js资源文件

    <link href="${ctxPath}/static/css/plugins/webuploader/webuploader.css" rel="stylesheet">
    <script src="${ctxPath}/static/js/plugins/webuploader/webuploader.min.js"></script>
    <script src="${ctxPath}/static/js/common/web-upload-object.js"></script>
  

• 写个文件上传的页面

    <div class="form-group">
    <div class="col-sm-4">
        <div id="${id}PreId">
            <div><img width="100px" height="100px"
                @if(isEmpty(avatarImg)){
                      src="${ctxPath}/static/img/boy.jpg"></div>
                @}else{
                      src="${ctxPath}/kaptcha/${avatarImg}"></div>
                @}
        </div>
    </div>
    <div class="col-sm-2">
        <div class="head-scu-btn upload-btn" id="${id}BtnId">
            <i class="fa fa-upload"></i> 上传
        </div>
    </div>
  

• 封装webuploader的方法

    /**
     * webuploader 工具类
     *
     * uploadUrl: 图片上传路径
     * uploadBtnId: 上传按钮的id
     * uploadPreId:图片预览框的id
     * fileSizeLimit: 图片上传最大限制
     * uploadBarId: 上传进度条
     */
    (function() {
        var $WebUpload = function(pictureId,url) {
            this.pictureId = pictureId;
            this.uploadBtnId = pictureId + "BtnId";
            this.uploadPreId = pictureId + "PreId";
            this.uploadUrl = url;
            this.fileSizeLimit = 100 * 1024 * 1024;
            this.picWidth = 800;
            this.picHeight = 800;
            this.uploadBarId = null;
        };
    
        $WebUpload.prototype = {
            /**
             * 初始化webUploader
             */
            init : function() {
                var uploader = this.create();
                this.bindEvent(uploader);
                return uploader;
            },
    
            /**
             * 创建webuploader对象
             */
            create : function() {
                var webUploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto : true,
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick : {
                        id : '#' + this.uploadBtnId,
                        multiple : false,// false只上传一个，true可以上传多个
                    },
                    // 只允许选择图片文件。
                    accept : {
                        title : 'Images',
                        extensions : 'gif,jpg,jpeg,bmp,png',
                        mimeTypes : 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
                    },
                    // swf文件路径
                    swf : Feng.ctxPath
                            + '/static/js/plugins/webuploader/Uploader.swf',
                    //是否禁掉整个页面的拖拽功能
                    disableGlobalDnd : true,
                    //是否可以重复上传
                    duplicate : true,
                    //文件上传的服务器端
                    server : this.uploadUrl,
                    // 文件最大限制
                    fileSingleSizeLimit : this.fileSizeLimit
                    //如需获取更多的配置参数查看http://fex.baidu.com/webuploader/doc/index.html 文档
                });
    
                return webUploader;
            },
    
            /**
             * 绑定事件
             */
            bindEvent : function(bindedObj) {
                var me =  this;
                bindedObj.on('fileQueued', function(file) {
                    /*这里默认设置上传图片大小宽高100px*/
                    var $li = $('<div><img width="100px" height="100px"></div>');
                    var $img = $li.find('img');
    
                    $("#" + me.uploadPreId).html($li);
    
                    // 生成缩略图
                    bindedObj.makeThumb(file, function(error, src) {
                        if (error) {
                            $img.replaceWith('<span>不能预览</span>');
                            return;
                        }
                        $img.attr('src', src);
                    }, me.picWidth, me.picHeight);
                });
    
                // 文件上传过程中创建进度条实时显示。
                bindedObj.on('uploadProgress', function(file, percentage) {
                    $("#"+me.uploadBarId).css("width",percentage * 100 + "%");
                });
    
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                bindedObj.on('uploadSuccess', function(file,response) {
                    Feng.success("上传成功");
                    $("#" + me.pictureId).val(response);
                });
    
                // 文件上传失败，显示上传出错。
                bindedObj.on('uploadError', function(file) {
                    Feng.error("上传失败");
                });
    
                // 其他错误
                bindedObj.on('error', function(type) {
                    if ("Q_EXCEED_SIZE_LIMIT" == type) {
                        Feng.error("文件大小超出了限制");
                    } else if ("Q_TYPE_DENIED" == type) {
                        Feng.error("文件类型不满足");
                    } else if ("Q_EXCEED_NUM_LIMIT" == type) {
                        Feng.error("上传数量超过限制");
                    } else if ("F_DUPLICATE" == type) {
                        Feng.error("图片选择重复");
                    } else {
                        Feng.error("上传过程中出错");
                    }
                });
    
                // 完成上传完了，成功或者失败
                bindedObj.on('uploadComplete', function(file) {
                });
            },
    
            /**
             * 设置图片上传的进度条的id
             */
            setUploadBarId: function (id) {
                this.uploadBarId = id;
            }
        };
        window.$WebUpload = $WebUpload;
    }());
  

• 工具类的使用

     // 初始化图片上传
        var avatarUp = new $WebUpload("avatar",'/upload');
        avatarUp.setUploadBarId("progressBar");
        avatarUp.init();
  

三、后端处理图片上传

/**
 * 上传图片
 */
@RequestMapping(method = RequestMethod.POST, path = "/upload")
@ResponseBody
public String upload(@RequestPart("file") MultipartFile picture) {
    //设置图片为唯一的uuid
    String pictureName = UUID.randomUUID().toString() + ".jpg";
    try {
        //获取上传路径
        String fileSavePath = getFileUploadPath();
        /**
         * transferTo在开发Web应用程序时比较常见的功能之一，
         * 就是允许用户利用multipart请求将本地文件上传到服务器,
         * Spring通过对ServletAPI的HttpServletRequest接口进行扩展，使其能够很好地处理文件上传 
         */
        picture.transferTo(new File(fileSavePath + pictureName));
    } catch (Exception e) {
        throw new GunsException(BizExceptionEnum.UPLOAD_ERROR);
    }
    return pictureName;
}