1 <form action="<%=basePath%>open/njResult.shtml"  id="njForm"  method="post">
 2      <input id="photoPath"  type="hidden" name="photoPath">
 3   </form>
 4       　　<div class="noUld_upB g-clear">
 5             　　　　<div class="noUld_up">
 6                       <img class="noUld_up_img" data-up="img" src="<%=basePath %>resources/img/all/other_addImg.png">
 7                       <div class="noUld_up_cnt g-clear">
 8                           <div class="fl">请上传图片</div>
 9                           <div class="noUld_up_cnt_r"><span class="btn-s">上传</span><input type="file" id="notPassPhoto" data-up="file"></div>
10                      </div>
11                  </div>
12 　　　　　　
13 　　　　　　　　<div class="yesCek_submit">
14 　　　　　　　　　　<a id="njSumit" href="javascript:void(0)" class="btn-b">提交</a>
15 　　　　　　　　</div>

 1 //图片上传change事件
 2         $("#notPassPhoto ").change(function(){
 3             uploadBtnChange("notPassPhoto","photoPath");//上传图片改变时,调用base64压缩方法
 4
 5         });
 6 $('#njSumit').click(function(){
 7     var photoPath = document.getElementById('photoPath').value;//获得压缩后的base64数据
 8 if(photoPath){
 9                     var ranparam = Math.random();
10                     $.ajax({
11                             url:"njNotPassPhoto.shtml",
12                             type: "POST",
13                             data:{'notPassphotoPath':photoPath,"ranparam":ranparam}, //把base64数据传到后台,由后台解码上传到服务器
14                             async : false,
15                         cache : false,
16                             success:function(data) {
17                                 if(data.status==200){
18                                     $("#photoPath").val(data.photoPath);//获得了传回来的图片路径,用于保存到数据库
19                                     $("#njForm").submit();//表单提交
20                                 }else{
21                                       alert(data.msg);
22                                   }
23                              },
24                             error: function(XMLHttpRequest, textStatus, errorThrown){
25                                 alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
26                         }
27                           });
28                     }else{
29                                 alert("请上传照片")
30                                 return
31                             }
32             }
33
34         });
35  function uploadBtnChange(id,val){
36             var scope = this;
37             if(window.File && window.FileReader && window.FileList && window.Blob){
38                 // 获取上传file
39                 var filefield = document.getElementById(id),
40                     file = filefield.files[0];
41                 // 获取用于存放压缩后图片base64编码
42                 var compressValue = document.getElementById(val);
43                 processfile(file,compressValue);
44             }else{
45                 alert("此浏览器不完全支持压缩上传图片");
46             }
47         }
48
49         function processfile(file,compressValue) {
50             var reader = new FileReader();
51             reader.onload = function (event) {
52                 var blob = new Blob([event.target.result]);
53                 window.URL = window.URL || window.webkitURL;
54                 var blobURL = window.URL.createObjectURL(blob);
55                 var image = new Image();
56                 image.src = blobURL;
57                 image.onload = function() {
58                     var resized = resizeMe(image);
59                     compressValue.value = resized;
60                 }
61             };
62             reader.readAsArrayBuffer(file);
63         }
64
65         function resizeMe(img) {
66             // 压缩的大小
67             var max_width = 800;
68             var max_height = 600;
69
70             var canvas = document.createElement('canvas');
71             var width = img.width;
72             var height = img.height;
73             if(width > height) {
74                 if(width > max_width) {
75                     height = Math.round(height *= max_width / width);
76                     width = max_width;
77                 }
78             }else{
79                 if(height > max_height) {
80                     width = Math.round(width *= max_height / height);
81                     height = max_height;
82                 }
83             }
84
85             canvas.width = width;
86             canvas.height = height;
87
88             var ctx = canvas.getContext("2d");
89             ctx.drawImage(img, 0, 0, width, height);
90             // 压缩率
91             return canvas.toDataURL("image/jpeg",0.92);
92         }     

 1 /**
 2      * Base64解码上传
 3      */
 4     @RequestMapping(value = "/njNotPassPhoto", method = RequestMethod.POST)
 5     @ResponseBody
 6     public Map<String, Object> njNotPassPhoto(String notPassphotoPath) {
 7         try {
 8             String photoPath = FileUploadUtils.getPath(notPassphotoPath);
 9             resultMap.put("status", 200);
10             resultMap.put("photoPath", photoPath);
11             return resultMap;
12         } catch (Exception e) {
13             e.printStackTrace();
14             resultMap.put("status", 500);
15             resultMap.put("msg", "服务器异常");
16         }
17         return null;
18
19     }

 1 public class FileUploadUtils {
 2     private static SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd");
 3
 4     public static String getPath(String base64) throws IOException {
 5
 6         String saveFileName = System.currentTimeMillis()
 7                 + RandomStringUtils.random(6, true, true) + ".jpg";
 8         Date date = new Date();
 9         String datePath = format.format(date);
10         String upload = "D:\\suyi\\photo\\" + datePath + "\\";
11
12         String path = upload + saveFileName;
13         // base64图片解码
14         // 对字节数组字符串进行Base64解码并生成图片
15         if (base64 == null) // 图像数据为空
16             return "";
17         base64 = base64.replaceAll("data:image/jpeg;base64,", "");
18         BASE64Decoder decoder = new BASE64Decoder();
19         byte[] b = decoder.decodeBuffer(base64);
20         for (int i = 0; i < b.length; ++i) {
21             if (b[i] < 0) {// 调整异常数据
22                 b[i] += 256;
23             }
24         }
25
26         File dir = new File(upload);
27         if (!dir.exists()) {
28             dir.mkdirs();
29         }
30         String fileName = path;
31         File file = new File(fileName);
32         OutputStream out = new FileOutputStream(file);
33         out.write(b);
34         out.flush();
35         out.close();
36         String ImagePath = "/suyi/showImage?imgId=" + datePath + "_"
37                 + saveFileName;
38         return ImagePath;
39
40     }
41 }