移动端普及的时代，流量是用户最关心的，手机拍出来的照片基本上都在1~2M以上，这样上传会非常耗流量，影响用户体验，此例能在保证清晰度的情况下，将4.5M的图片压缩为30K
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML5上传图片预览</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script> 7 <script src="dist/lrz.bundle.js" type="text/javascript"></script> 8 </head> 9 <body> 10 <h3>请选择图片文件：JPG/GIF</h3> 11 12 <input type="file" id="payfile" name="myfile" onchange="fileChange(this)" /> 13 14 </form> 15 <script> 16 function fileChange(that){ 17 var path =$("#ctx").val(); 18 var filepath=$(that).val(); 19 if(filepath==""){ 20 return; 21 } 22 var extStart=filepath.lastIndexOf("."); 23 var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 24 if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){ 25 alert("只允许上传jpg、png、bmp、jpeg格式的图片"); 26 return false; 27 } 28 //以图片宽度为800进行压缩 29 lrz(that.files[0],{ 30 800 31 }) 32 .then(function (rst){ 33 //压缩后异步上传 34 $.ajax({ 35 url : "http://192.168.1.168/storage/pages/AnJuKe/up.htm", 36 type: "POST", 37 data : { 38 imgdata:rst.base64//压缩后的base值 39 }, 40 dataType:"json", 41 cache:false, 42 async:false, 43 success : function(data) { 44 if(data.success){ 45 alert(data.message);///data.message为上传成功后的文件路径 46 }else{ 47 alert(data.message);///data.message为上传失败原因 48 } 49 }, 50 error:function(){ 51 alert("上传失败"); 52 } 53 }); 54 }); 55 } 56 </script> 57 </body> 58 </html>
1 /** 2 * 文件上传 3 * @throws IOException 4 */ 5 public ModelAndView up(HttpServletRequest request,HttpServletResponse response) throws IOException { 6 String imgdata = request.getParameter("imgdata"); 7 FileOutputStream outputStream=null; 8 try { 9 String basePath = request.getRealPath("/upload"); 10 String imgPath=basePath+"/test1.jpg"; 11 // new一个文件对象用来保存图片 12 File imageFile = new File(imgPath); 13 // 创建输出流 14 outputStream = new FileOutputStream(imageFile); 15 // 获得图片文件流 16 byte[] result = Base64.decodeBase64(imgdata.split(",")[1].getBytes());//解码 17 for (int i = 0; i < result.length; ++i) { 18 if (result[i] < 0) {// 调整异常数据 19 result[i] += 256; 20 } 21 } 22 outputStream.write(result); 23 } catch (Exception e) { 24 }finally{ 25 outputStream.flush(); 26 outputStream.close(); 27 } 28 return null; 29 }
需要jar
commons-codec-1.10.jar