异步上传&预览图片-压缩图片

移动端普及的时代，流量是用户最关心的，手机拍出来的照片基本上都在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          width: 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>
Demo.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     }
java Code

js下载

需要jar

commons-codec-1.10.jar

 

posted @ 2017-12-25 17:17  RollBack2010  阅读(195)  评论(0)  编辑  收藏  举报