Spring Boot 利用WebUploader进行文件上传功能
程序员文章站
2023-08-19 16:37:59
web uploader简介
webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主,flash为辅的现代文件上传组件。在现代的浏...
web uploader简介
webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主,flash为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势,同时又不摒弃主流ie浏览器,沿用原来的flash运行时,兼容ie6+,ios 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。
我们这里使用官网的一个例子来实现我们个人头像的上传。
我们的重点是在spring boot项目中利用webuploader如何进行文件上传,所以直接实现一个简单的功能,仅供参考。
下面是一个从官网下载来的示例:带剪裁的图片上传功能。
我们利用示例来改造项目中的个人头像上传。
效果看起来是这样的:
首先我们来改造我们的webuploader示例代码。
以下都是我项目中的部分代码:
(function( factory ) { if ( !window.jquery ) { alert('jquery is required.') } jquery(function() { factory.call( null, jquery ); }); }) (function( $ ) { // ----------------------------------------------------- // ------------ start ---------------------------------- // ----------------------------------------------------- // --------------------------------- // --------- uploader ------------- // --------------------------------- var uploader = (function() { // -------setting------- // 如果使用原始大小,超大的图片可能会出现 croper ui 卡顿,所以这里建议先缩小后再crop. var frame_width = 1600; var _ = webuploader; var uploader = _.uploader; var uploadercontainer = $('.uploader-container'); var uploader, file; if ( !uploader.support() ) { alert( 'web uploader 不支持您的浏览器!'); throw new error( 'webuploader does not support the browser you are using.' ); } // hook, // 在文件开始上传前进行裁剪。 uploader.register({ 'before-send-file': 'cropimage' }, { cropimage: function( file ) { var data = file._cropdata, image, deferred; file = this.request( 'get-file', file ); deferred = _.deferred(); image = new _.lib.image(); deferred.always(function() { image.destroy(); image = null; }); image.once( 'error', deferred.reject ); image.once( 'load', function() { image.crop( data.x, data.y, data.width, data.height, data.scale ); }); image.once( 'complete', function() { var blob, size; // 移动端 uc / qq 浏览器的无图模式下 // ctx.getimagedata 处理大图的时候会报 exception // index_size_err: dom exception 1 try { blob = image.getasblob(); size = file.size; file.source = blob; file.size = blob.size; file.trigger( 'resize', blob.size, size ); deferred.resolve(); } catch ( e ) { console.log( e ); // 出错了直接继续,让其上传原始图片 deferred.resolve(); } }); file._info && image.info( file._info ); file._meta && image.meta( file._meta ); image.loadfromblob( file.source ); return deferred.promise(); } }); return { init: function( selectcb ) { uploader = new uploader({ pick: { id: '#filepicker', multiple: false }, // 设置用什么方式去生成缩略图。 thumb: { quality: 70, // 不允许放大 allowmagnify: false, // 是否采用裁剪模式。如果采用这样可以避免空白内容。 crop: false }, // 禁掉分块传输,默认是开起的。 chunked: false, // 禁掉上传前压缩功能,因为会手动裁剪。 compress: false, // filesinglesizelimit: 2 * 1024 * 1024, server: 'studentimgfileupload', swf: $.trim($("#base_url").val()) + '/static/webuploader/uploader.swf', filenumlimit: 1, // 只允许选择图片文件。 accept: { title: 'images', // extensions: 'gif,jpg,jpeg,bmp,png', // mimetypes: 'image/*' extensions: 'jpg,jpeg,png', //解决webuploader chrome 点击上传文件选择框会延迟几秒才会显示 反应很慢 mimetypes: 'image/jpg,image/jpeg,image/png' //修改这行 } //formdata: {"authorization": localstorage.token}, //额外参数传递,可以没有 // chunked: true, //分片 // chunksize: 10 * 1024 * 1024, //分片大小指定 // threads:1, //线程数量 // disableglobaldnd: true //禁用拖拽 // onerror: function() { // var args = [].slice.call(arguments, 0); // alert(args.join('\n')); // } }); uploader.on('filequeued', function( _file ) { file = _file; uploader.makethumb( file, function( error, src ) { if ( error ) { alert('不能预览'); return; } selectcb( src ); }, frame_width, 1 ); // 注意这里的 height 值是 1,被当成了 100% 使用。 }); /** * 验证文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "q_type_denied") { showinfo("请上传jpg、jepg、png、格式文件"); } }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadsuccess', function( file ) { showinfo("上传成功"); }); // 文件上传失败,显示上传出错。 uploader.on( 'uploaderror', function( file ) { showinfo("上传失败"); }); }, crop: function( data ) { var scale = croper.getimagesize().width / file._info.width; data.scale = scale; file._cropdata = { x: data.x1, y: data.y1, width: data.width, height: data.height, scale: data.scale }; }, upload: function() { uploader.upload(); } } })(); // --------------------------------- // --------- crpper --------------- // --------------------------------- var croper = (function() { var container = $('.cropper-wraper'); var $image = container.find('.img-container img'); var btn = $('.upload-btn'); var isbase64supported, callback; $image.cropper({ aspectratio: 4 / 4, preview: ".img-preview", done: function(data) { // console.log(data); } }); function srcwrap( src, cb ) { // we need to check this at the first time. if (typeof isbase64supported === 'undefined') { (function() { var data = new image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = src; isbase64supported = support; })(); } if ( isbase64supported ) { cb( src ); } else { // otherwise we need server support. // convert base64 to a file. // $.ajax('', { // method: 'post', // data: src, // datatype:'json' // }).done(function( response ) { // if (response.result) { // cb( response.result ); // } else { // alert("预览出错"); // } // }); } } btn.on('click', function() { callback && callback($image.cropper("getdata")); return false; }); return { setsource: function( src ) { // 处理 base64 不支持的情况。 // 一般出现在 ie6-ie8 srcwrap( src, function( src ) { $image.cropper("setimgsrc", src); }); container.removeclass('webuploader-element-invisible'); return this; }, getimagesize: function() { var img = $image.get(0); return { width: img.naturalwidth, height: img.naturalheight } }, setcallback: function( cb ) { callback = cb; return this; }, disable: function() { $image.cropper("disable"); return this; }, enable: function() { $image.cropper("enable"); return this; } } })(); // ------------------------------ // -----------logic-------------- // ------------------------------ var container = $('.uploader-container'); uploader.init(function( src ) { croper.setsource( src ); // 隐藏选择按钮。 container.addclass('webuploader-element-invisible'); // 当用户选择上传的时候,开始上传。 croper.setcallback(function( data ) { uploader.crop(data); uploader.upload(); }); }); // ----------------------------------------------------- // ------------ end ------------------------------------ // ----------------------------------------------------- });
还有页面的部分代码:
下面是controller部分的代码:
@requestmapping(value="/student/studentimgfileupload", method=requestmethod.post) @responsebody string studentimgfileupload(@requestparam multipartfile file, httpservletrequest request){ logger.info("学生头像上传....") //获取文件名 string originalfilename = file.getoriginalfilename() logger.info("上传文件名:" + originalfilename) string realpath = request.getservletcontext().getrealpath("/public/student/") string uploadfilename = system.currenttimemillis()+"_"+ originalfilename logger.info("获取上传路径:" + realpath + ", 上传的真实文件名:" + uploadfilename) boolean flag = true //合并文件 randomaccessfile rafile = null bufferedinputstream inputstream = null try{ file dirfile = new file(realpath, uploadfilename) //以读写的方式打开目标文件 rafile = new randomaccessfile(dirfile, "rw") rafile.seek(rafile.length()) inputstream = new bufferedinputstream(file.getinputstream()) byte[] buf = new byte[1024] int length = 0 while ((length = inputstream.read(buf)) != -1) { rafile.write(buf, 0, length) } }catch(exception e){ flag = false logger.info("上传出错:" + e.getmessage()) throw new ioexception(e.getmessage()) }finally{ try { if (inputstream != null) { inputstream.close() } if (rafile != null) { rafile.close() } }catch(exception e){ flag = false logger.info("上传出错:" + e.getmessage()) throw new ioexception(e.getmessage()) } } }
这样就简单实现了在spring boot项目中使用webuploader进行文件上传的功能。
总结
以上所述是小编给大家介绍的spring boot 利用webuploader进行文件上传功能,希望对大家有所帮助
推荐阅读
-
使用Spring Boot上传文件功能
-
Spring Boot + thymeleaf 实现文件上传下载功能
-
使用Spring Boot上传文件功能
-
Spring Boot + thymeleaf 实现文件上传下载功能
-
使用Spring boot + jQuery上传文件(kotlin)功能实例详解
-
Spring Boot 利用WebUploader进行文件上传功能
-
Spring Boot 会员管理系统之处理文件上传功能
-
使用Spring boot + jQuery上传文件(kotlin)功能实例详解
-
基于Spring Boot利用 ajax实现上传图片功能
-
Spring Boot 2.x 实现文件上传功能