WebUploader是由百度WebFE (FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流即浏览器,沿用原来的FLASH运行时,兼容IE6 +, iOS 6 +,安卓4 +。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。
我们这里使用官网的一个例子来实现我们个人头像的上传。
我们的重点是在春季启动项目中利用WebUploader如何进行文件上传,所以直接实现一个简单的功能,仅供参考。
下面是一个从官网下载来的示例:带剪裁的图片上传功能。
我们利用示例来改造项目中的个人头像上传。
效果看起来是这样的:
首先我们来改造我们的WebUploader示例代码。
以下都是我项目中的部分代码:
(函数(工厂){
如果(!窗口。jQuery) {
alert (jQuery是必需的。)
}
jQuery(函数(){
工厂。调用(null, jQuery);
});
})
(函数(美元){//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//- - - - - - - - - - - -开始- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//- - - - - - - - - - - -上传- - - - - - - - - - - - -//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var上传=(函数(){//- - - - - -——调节- - - - - - -//如果使用原始大小,超大的图片可能会出现作物UI卡顿,所以这里建议先缩小后再作物。
var FRAME_WIDTH=1600;
var _=WebUploader;
var上传=_.Uploader;
var uploaderContainer=$ (' .uploader-container ');
var上传、文件;
如果(! Uploader.support ()) {
alert (' Web上传不支持您的浏览器!”);
把新的错误(“WebUploader不支持您使用的浏览器。”);
}//钩,//在文件开始上传前进行裁剪。
Uploader.register ({
“before-send-file”:“cropImage”
}, {
cropImage:函数(文件){
var=https://www.yisu.com/zixun/file._cropData的数据,
形象,延迟;
文件=Ｇ肭?“文件”,文件);
延迟=_.Deferred ();
形象=new _.Lib.Image ();
deferred.always(函数(){
image.destroy ();
形象=零;
});
的形象。(“错误”,延迟。拒绝);
的形象。一旦(“负载”,函数(){
的形象。作物(数据。x,数据。y,数据。宽度、数据。高度数据。规模);
});
的形象。一旦(“完成”,函数(){
var blob,大小;//移动端UC/qq浏览器的无图模式下//ctx。getImageData处理大图的时候会报异常
1//INDEX_SIZE_ERR: DOM异常
尝试{
blob=image.getAsBlob ();
大?file.size;
文件。源=团;
文件。大?blob.size;
文件。触发(“调整”,blob。大小、尺寸);
deferred.resolve ();
}捕捉(e) {
控制台。日志(e);//出错了直接继续,让其上传原始图片
deferred.resolve ();
}
});
文件。_info,,image.info(文件。_info);
文件。_meta,,的形象。元(文件。_meta);
的形象。loadFromBlob(文件。源);
返回deferred.promise ();
}
});
返回{
初始化:函数(selectCb) {
上传=new上传({
选择:{
id:“# filePicker”,
多个:假
},//设置用什么方式去生成缩略图。
拇指:{
质量:70年,//不允许放大
allowMagnify:假的,//是否采用裁剪模式。如果采用这样可以避免空白内容。
作物:假
},//禁掉分块传输,默认是开起的。
分块:假的,//禁掉上传前压缩功能,因为会手动裁剪。
压缩:假的,//fileSingleSizeLimit: 2 * 1024 * 1024,
服务器:“StudentImgFileUpload”,
主权财富基金:.trim美元($ (" # BASE_URL ") .val()) + '/静态/webuploader/Uploader.swf ',
fileNumLimit: 1、//只允许选择图片文件。
接受:{
标题:“图像”,//扩展:“gif、jpg, jpeg, bmp, png”,//mimetype:“图像/*”
扩展:jpg, jpeg, png,//解决WebUploader chrome点击上传文件选择框会延迟几秒才会显示反应很慢
mimetype:“图像/jpg图像/jpeg图像/png '//修改这行
}//formData:{“授权”:localStorage。令牌},//额外参数传递,可以没有//分块:真的,//分片//chunkSize: 10 * 1024 * 1024,//分片大小指定//线程:1、//线程数量//disableGlobalDnd:真//禁用拖拽//>
@RequestMapping (value=" https://www.yisu.com/student/StudentImgFileUpload ",方法=RequestMethod.POST)
@ResponseBody
字符串studentImgFileUpload (@RequestParam MultipartFile文件,HttpServletRequest请求){
logger.info(“学生头像上传....”)//获取文件名
字符串originalFilename=file.getOriginalFilename ()
logger.info(“上传文件名:“+ originalFilename)
字符串realPath=request.getServletContext () .getRealPath(“/公共/学生/?
字符串uploadFileName=System.currentTimeMillis () +“_”+ originalFilename
logger.info(“获取上传路径:”+ realPath +”,上传的真实文件名:”+ uploadFileName)
布尔标志=true//合并文件
RandomAccessFile raFile=零
BufferedInputStream inputStream=零
尝试{
文件dirFile=新文件(realPath uploadFileName)//以读写的方式打开目标文件
raFile=新RandomAccessFile (dirFile rw)
raFile.seek (raFile.length ())
inputStream=new BufferedInputStream (file.getInputStream ())
byte [] buf=new字节[1024]
int长度=0
在((长度=read (buf)) !=1) {
raFile。写(buf 0长度)
}
}捕捉(异常e) {
国旗=false
logger.info(“上传出错:“+ e.getMessage ())
把新的IOException (e.getMessage ())
最后}{
尝试{
如果(inputStream !=null) {
inputStream.close ()
}
如果(raFile !=null) {
raFile.close ()
}
}捕捉(异常e) {
国旗=false
logger.info(“上传出错:“+ e.getMessage ())
把新的IOException (e.getMessage ())
}
}
}
