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

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

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

开始煮饭：

1.html

<form id="faceIcon" target="hid_frame" action="<%=path %>/uploadImgtests" method="post" enctype="multipart/form-data">
    	<input type="button" class="upload-cover" value="上传图片"/>
    	<input class="photo-file" type="file" name="imgFile" id="fcupload" οnchange="readURL(this);"/>
    	<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
    	<input type="submit" value="上传" id="upload"/>
    </form>
    
    <img alt="" src="" id="displayImg"/>

2.js代码

<script type="text/javascript">
		
	
		
		
		function readURL(input) {
			
            if (input.files && input.files[0]) {
            	alert("OK");
                var reader = new FileReader();
				
                reader.onload = function (e) {
                	$('#displayImg').removeAttr('src');
                    $('#displayImg').attr('src', e.target.result);
                    alert(e.target.result);
                    var api = $('#displayImg').Jcrop({
                    	setSelect: [ 20, 20, 200, 200 ],
                     	aspectRatio: 1,
						onSelect: updateCoords
						}
		            );
                }

                reader.readAsDataURL(input.files[0]);
            }
            
            
        }
        
        function updateCoords(c){	
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
		};
		

			
	</script>

3.后台代码

@RequestMapping("/uploadImgtests")
	public String uploadImgyrdys(HttpServletRequest request,HttpServletResponse response,
			int x,int y,int w,int h) throws IOException{
		System.out.println(x+"\n"+ y+"\n"+w+"\n"+h);
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;  
		MultipartFile multFile = multiRequest.getFile("imgFile");  
		ImageInputStream iis = null;  
		
		// 扩展名格式：  
		String extName = "";  
		String message = "";  
		String newName = "";  
		boolean flag = true;  
		//取得上传的文件名  
		String fileName = multFile.getOriginalFilename();  
		System.out.println(fileName);
		System.out.println("ok");
		if(fileName != null && !"".equals(fileName.trim())){  
			//上传文件的大小  
			long size = multFile.getSize();  
			if(size > (1024*1024)){  
				message = "只允许上传1M之内的图片";  
				flag = false;  
			}  
			if (fileName.lastIndexOf(".") >= 0) {  
				extName = fileName.substring(fileName.lastIndexOf("."));
				System.out.println(extName);
			}  
			//定义允许上传的文件类型  
			List<String> fileTypes = new ArrayList<String>();  
			fileTypes.add(".jpg");  
			fileTypes.add(".jpeg");  
			fileTypes.add(".gif");  
			fileTypes.add(".png");  
			if(!fileTypes.contains(extName.toLowerCase())){  
				message = "只允许上传jpg,jpeg,gif,png格式的图片";  
				System.out.println(message);
				flag = false;  
			}  
			String root=request.getSession().getServletContext().getRealPath("");  
			String savePath = root+File.separator+"img"+File.separator;  
			File f1 = new File(savePath);  
			if (!f1.exists()) {  
				f1.mkdirs();  
			}  
			if(flag){  
				System.out.println("OK");
				DateFormat df = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ssSSS");  
				Calendar calendar = Calendar.getInstance();  
				//以当前时间为文件名 格式如：2011-09-03-19-30-36047   
				newName = df.format(calendar.getTime());  
				//newName = UUID.randomUUID().toString();
//				iis = ImageIO.createImageInputStream(multFile);  
				
				Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(new String(extName.substring(1).getBytes(),"utf-8"));
				ImageReader reader = it.next(); 
				iis = ImageIO.createImageInputStream(multFile.getInputStream());
				reader.setInput(iis,true) ;
				ImageReadParam param = reader.getDefaultReadParam(); 
				Rectangle rect = new Rectangle(x, y, w, h); 
				param.setSourceRegion(rect);
				System.out.println(extName.substring(1));
				BufferedImage bi = reader.read(0,param); 
				ImageIO.write(bi, extName.substring(1), new File(savePath + newName + extName)); 
			}  
		}  
		return null;  
	}

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