头像上传以及之前预览再以及剪裁——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" onchange="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;
}

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