有的朋友可能对于“spring mvc+localResizeIMG实现H5端图片压缩上传”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

这次给大家带来springmvc+localResizeIMG实现H5端图片压缩上传，springmvc+localResizeIMG实现H5端图片压缩上传的注意事项有哪些，下面就是实战案例，一起来看一下。

<>style="text-align:left">最近在做一个移动端HTML5的应用，使用到了上传功能，起初使用传统的上传方式上传手机拍照的照片，由于手机拍照出来的照片一般都是好几MB，所以上传速度是非常慢的。

<>style="text-align:left">在网上找了很久找到了localResizeIMG压缩框架，感觉非常的实用，所以在此分享给大家。

<>style="text-align:left">第一步：下载localResizeIMG

<>style="text-align:left">localResizeIMG放在github中的，地址是：https://github.com/think2011/localResizeIMG。

<>style="text-align:left">第二步：在web工程中导入localResizeIMG相关js

<>style="text-align:left">解压localResizeIMG压缩吧，把目录中的dist文件夹拷贝到工程中，我的是放在js目录下。

<>style="text-align:left">然后在自己的js中导入jQuery和localResizeIMG的js。如：

<>class="brush:php;toolbar:false"><>class='language-default'><scriptsrc=""> <scripttype="text/javascript"src="">

<>style="text-align:left">第三步：在自己的上传的input的file框加入onchange事件如下代码

<>class="brush:php;toolbar:false">

<>style="text-align:left">在fileChange方法中实现代码的压缩和对压缩后生成的base64异步传到后台

<>class="brush:php;toolbar:false">functionfileChange(that){ varfilepath=$(that).val(); if(filepath=="") { return; } varextStart=filepath.lastIndexOf("."); varext=filepath.substring(extStart,filepath.length).toUpperCase(); if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){ alert("只允许上传jpg、png、bmp、jpeg格式的图片"); returnfalse; } //以图片宽度为800进行压缩 lrz(that.files[0],{ width:800 }) .then(function(rst){ //压缩后异步上传 $.ajax({ url:"/common/fileUploadPicture", type:"POST", data:{ imgdata:rst.base64//压缩后的base值 }, dataType:"json", cache:false, async:false, success:function(data){ if(data.success) { alert(data.message);///data.message为上传成功后的文件路径 }else{ alert(data.message);///data.message为上传失败原因 } }, error:function(){ alert("上传失败"); } }); }); }

<>style="text-align:left">第四步：springmvccontroller后台接收base值并解析并保存文件

<>class="brush:php;toolbar:false">importsun.misc.BASE64Decoder;//导入的base64的类 /** *文件上传 */ @ResponseBody @RequestMapping("common/fileUploadPicture") publicObjectfileUploadPicture(Stringimgdata,HttpServletRequestrequest){ LOGGER.info("[文件上传（fileUploadPicture）][params:imgdata="+imgdata+"]"); BASE64Decoderdecoder=newBASE64Decoder(); try{ StringbasePath=request.getRealPath("/upload_files"); stringimgPath=basePath+"/test.jpg"; //new一个文件对象用来保存图片，默认保存当前工程根目录 FileimageFile=newFile(imgPath); //创建输出流 FileOutputStreamoutputStream=newFileOutputStream(imageFile); //获得一个图片文件流，我这里是从flex中传过来的 byte[]result=decoder.decodeBuffer(imgdata.split(",")[1]);//解码 for(inti=0;i

<>style="text-align:left">Result类：

<>class="brush:php;toolbar:false">importjava.io.Serializable; publicclassResultimplementsSerializable{ privatestaticfinallongserialVersionUID=1L; privatebooleansuccess; privateStringmessage; publicResult(){ success=true; } publicResult(booleansuccess,Stringmessage){ this.success=success; this.message=message; } publicbooleanisSuccess(){ returnsuccess; } publicvoidsetSuccess(booleansuccess){ this.success=success; } publicStringgetMessage(){ returnmessage; } publicvoidsetMessage(Stringmessage){ this.message=message; } @Override publicStringtoString(){ return"Result[success="+success+",message="+message+"]"; } }

以上就是“spring mvc+localResizeIMG实现H5端图片压缩上传”的详细内容，更多请关注77isp云服务器技术网其它相关文章！