头像上传以及之前预览再以及剪裁——javaweb版本

预备材料：环境搭配，这不用说的，我搭建的是：springmvc + spring + hibernate 

                    js组件：query-1.7.2.js，jquery.Jcrop.min.js，styles/jquery.Jcrop.min.css

开始煮饭：

1.html

[html]  view plain copy

1. <form id="faceIcon" target="hid_frame" action="<%=path %>/uploadImgtests" method="post" enctype="multipart/form-data">  
2.         <input type="button" class="upload-cover" value="上传图片"/>  
3.         <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>  
4.         <input type="hidden" id="x" name="x" />  
5.         <input type="hidden" id="y" name="y" />  
6.         <input type="hidden" id="w" name="w" />  
7.         <input type="hidden" id="h" name="h" />  
8.         <input type="submit" value="上传" id="upload"/>  
9.     </form>  
10.       
11.     <img alt="" src="" id="displayImg"/>  

2.js代码

[html]  view plain copy

1. <script type="text/javascript">  
2.           
3.       
4.           
5.           
6.         function readURL(input) {  
7.               
8.             if (input.files && input.files[0]) {  
9.                 alert("OK");  
10.                 var reader = new FileReader();  
11.                   
12.                 reader.onload = function (e) {  
13.                     $('#displayImg').removeAttr('src');  
14.                     $('#displayImg').attr('src', e.target.result);  
15.                     alert(e.target.result);  
16.                     var api = $('#displayImg').Jcrop({  
17.                         setSelect: [ 20, 20, 200, 200 ],  
18.                         aspectRatio: 1,  
19.                         onSelect: updateCoords  
20.                         }  
21.                     );  
22.                 }  
23.   
24.                 reader.readAsDataURL(input.files[0]);  
25.             }  
26.               
27.               
28.         }  
29.           
30.         function updateCoords(c){     
31.             $('#x').val(c.x);  
32.             $('#y').val(c.y);  
33.             $('#w').val(c.w);  
34.             $('#h').val(c.h);  
35.         };  
36.           
37.   
38.               
39.     </script>  

3.后台代码

[html]  view plain copy

1. @RequestMapping("/uploadImgtests")  
2.     public String uploadImgyrdys(HttpServletRequest request,HttpServletResponse response,  
3.             int x,int y,int w,int h) throws IOException{  
4.         System.out.println(x+"\n"+ y+"\n"+w+"\n"+h);  
5.         MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;    
6.         MultipartFile multFile = multiRequest.getFile("imgFile");    
7.         ImageInputStream iis = null;    
8.           
9.         // 扩展名格式：    
10.         String extName = "";    
11.         String message = "";    
12.         String newName = "";    
13.         boolean flag = true;    
14.         //取得上传的文件名    
15.         String fileName = multFile.getOriginalFilename();    
16.         System.out.println(fileName);  
17.         System.out.println("ok");  
18.         if(fileName != null && !"".equals(fileName.trim())){    
19.             //上传文件的大小    
20.             long size = multFile.getSize();    
21.             if(size > (1024*1024)){    
22.                 message = "只允许上传1M之内的图片";    
23.                 flag = false;    
24.             }    
25.             if (fileName.lastIndexOf(".") >= 0) {    
26.                 extName = fileName.substring(fileName.lastIndexOf("."));  
27.                 System.out.println(extName);  
28.             }    
29.             //定义允许上传的文件类型    
30.             List<String> fileTypes = new ArrayList<String>();    
31.             fileTypes.add(".jpg");    
32.             fileTypes.add(".jpeg");    
33.             fileTypes.add(".gif");    
34.             fileTypes.add(".png");    
35.             if(!fileTypes.contains(extName.toLowerCase())){    
36.                 message = "只允许上传jpg,jpeg,gif,png格式的图片";    
37.                 System.out.println(message);  
38.                 flag = false;    
39.             }    
40.             String root=request.getSession().getServletContext().getRealPath("");    
41.             String savePath = root+File.separator+"img"+File.separator;    
42.             File f1 = new File(savePath);    
43.             if (!f1.exists()) {    
44.                 f1.mkdirs();    
45.             }    
46.             if(flag){    
47.                 System.out.println("OK");  
48.                 DateFormat df = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ssSSS");    
49.                 Calendar calendar = Calendar.getInstance();    
50.                 //以当前时间为文件名 格式如：2011-09-03-19-30-36047     
51.                 newName = df.format(calendar.getTime());    
52.                 //newName = UUID.randomUUID().toString();  
53. //              iis = ImageIO.createImageInputStream(multFile);    
54.                   
55.                 Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(new String(extName.substring(1).getBytes(),"utf-8"));  
56.                 ImageReader reader = it.next();   
57.                 iis = ImageIO.createImageInputStream(multFile.getInputStream());  
58.                 reader.setInput(iis,true) ;  
59.                 ImageReadParam param = reader.getDefaultReadParam();   
60.                 Rectangle rect = new Rectangle(x, y, w, h);   
61.                 param.setSourceRegion(rect);  
62.                 System.out.println(extName.substring(1));  
63.                 BufferedImage bi = reader.read(0,param);   
64.                 ImageIO.write(bi, extName.substring(1), new File(savePath + newName + extName));   
65.             }    
66.         }    
67.         return null;    
68.     }  

有点小缺憾就是选择了图片，再换不了，要重新刷新页面才行。