一、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;
}