3.之后就是图片裁剪了，图片裁剪功能我找了好多插件，最后锁定jcrop，也是因为它的demo打动了我(太好看了),之后就是导入文件，在我这里，我在页面接收后台返回来的图片路径之后启用jcrop，也就是openJcrop（）方法，这样就可以加载jcrop插件了，具体大家想进一步了解这个裁剪工具，请到官网细细的研究，我就不再做过多的谈论了。
大家注意，在这里有个大坑，真的是大坑，就是重新选择图片的时候，被jcrop加载过的img的src是不能被修改的，这个当初卡了我好长时间，被jcrop加载一次jcrop就会生成一个自己的编辑对象（我自己的理解），这时候就和原来的img没有关系了，直到最后细细研究api才找到了一个方法，唯一的方法就是将这个jcrop销毁，就是jcrop_api.destroy(),这个有很大的学问，我就提示一点，就是将jcrop_api声明为全局变量，下面贴出js代码（和上边的html是在一个文件下）：
<script type="text/javascript"> $(function(){ var jcrop_api; }); $("#file_upload").change(function() { $("#msg").text(''); var oFile = $(this)[0].files[0]; //判断上传文件大小 if (oFile.size > 1*1024*1024) { $("#msg").text('你选择了太大的文件，请选择一个1M以下的图像文件').css('color','red'); $(this).val(""); return; } //判断类型 var filepath=$(this).val(); var extStart=filepath.lastIndexOf("."); var ext=filepath.substring(extStart,filepath.length).toUpperCase(); if(ext!=".JPEG"&&ext!=".PNG"&&ext!=".JPG"){ $("#msg").text('请选择一个有效的图像文件(jpg,png是允许的)').css('color','red'); $(this).val(""); return; } $("#fileUp").ajaxSubmit({ type: "POST", url:"/file/img/upload", dataType: "json", contentType:"application/json", success: function(parameter){ $("#target2").attr('src','/upload/'+parameter.fileName); $("#filePathInput").val('/upload/'+parameter.fileName); if($("#format").text()=="重新上传"){ jcrop_api.destroy() } $("#format").text("重新上传"); //启动jcrop支持 openJcrop('/upload/'+parameter.fileName); }, error : function(data) { alert("ajax传输发生错误！！！"); } }); }); function photoSummit(){ //alert($("#w").val()+","+$("#h").val()+","+$("#x").val()+","+$("#y").val()); //$("#fileUp").attr("action", "/file/img/upload").submit(); if($("#w").val()>0 && $("#h").val()>0){ $("#fileUp").ajaxSubmit({ type: "POST", url:"/file/img/cutandscale", dataType: "json", contentType:"application/json", success: function(data){ $("#msg").text('上传头像成功！！！').css('color','red'); //alert($("#filePathInput").val()); window.parent.back($("#filePathInput").val()); }, error : function(data) { alert("ajax传输发生错误！！！"); } }); }else{ $("#msg").text('请用鼠标截取图片').css('color','red'); } } //启动jcrop function openJcrop(imgPath){ //启动jcrop支持 var boundx,boundy, xsize = $('#preview-pane .preview-container').width(), ysize = $('#preview-pane .preview-container').height(); $('#target').Jcrop({ minSize: [110, 110], onChange: updatePreview, onSelect: updatePreview, aspectRatio: xsize / ysize },function(){ // Use the API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; }); jcrop_api.setImage(imgPath); function updatePreview(c) { if (parseInt(c.w) > 0) { var rx = xsize / c.w; var ry = ysize / c.h; $('#preview-pane .preview-container img').css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); $("#w").val(c.w); $("#h").val(c.h); $("#x").val(c.x); $("#y").val(c.y); } }; } </script>