这个实例，附有源码，给出源码的原因是这个实在没有难度，但是却很繁琐的事情，经过这个实例我再也不相信网上的内容，都TMD互抄，没有一点使用价值，给学习带来了不少负面影响，都是一些没有实战的乱弹，叫老夫走了不少弯路！

    不得不抱怨啊，个人能力真的有限……；前些天，没有压力的将uploadify这个这jQuery插件，看懂并且成功使用，然后，便想做一个图片预览和剪切保存的小应用，因为使用uploadify很容易的将图片文件上传并且显示在前台页面，下一步便是寻找可以剪切和缩放图片的插件；网上一搜，我便看上了imgareaselect这个插件，便一门心思的去搞了；现在看来，确实能力有限，足足搞了两天，最终各种功能都实现了，可是重大缺憾，剪切的图片属性不是想要（所选的）的区域，这个问题足足花了一天时间也没有解决，只知道是向后台传递的参数不对，我试了各种参数，也不像网上或者官网上说的那样，要一个x,y,weight,height,便可以了，虽然失败了，……好在我有一份已经实现此功能的代码，只不过这个事例用的Jcrop这个插件，我有不得不了解这个插件，看了半天，与imgareaselect大同小异，没有办法，在Jcrop中传递同样的参数就可以实现所有的功能，这一点是在令我头痛！

一、准备：

  这个实例，不但用到了Jcrop这个插件还涉及到了json2这个文件；所以，你必须准备好所需的JS文件，与前一篇文章详解，依然使用上一篇的代码，文件上传已经成功，接着将传来的图片，进行选择，剪切，缩放和保存！

见图所需的文件以及项目目录：

152525679.jpg

项目架构好之后，便开始使用这个插件了使用uploadify的插件就不在重复了。

二、Jcrop插件的引入与uploadify相似，只需要一个有id属性的《img》标签；下面为index.jsp页面，注意JS的引入：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>更改头像</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
                                                                                                                                                                                                                          
  <link rel="stylesheet" href="css/default.css" type="text/css"></link>
  <link rel="stylesheet" href="css/uploadify.css" type="text/css"></link>
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"></link>
                                                                                                                                                                                                                        
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
  <script type="text/javascript" src="js/swfobject.js"></script>
  <script type="text/javascript" src="js/fileupload.js"></script>
  <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
  <script type="text/javascript" src="js/jQuery.UtrialAvatarCutter.js"></script>
                                                                                                                                                                                                                          
  </head>
  <body>
  <div> </div>
   <div style="font-size: 15px;">
   图片文件:&nbsp&nbsp&nbsp
  <input type="file" name="file" id="file" /></div>
  <input type="button" id="uploadFile" value="上传文件">
  <input type="button" id="cancelUpload" value="取消上传">
  <div id="fileList" style="height:51px;"></div>
                                                                                                                                                                                                                                
                                                                                                                                                                                                                         
                                                                                                                                                                                                                         
   <div><h2>图片预览:</h2></div>
  <table>
  <tr>
    <td><img id="userimg"  width="500" height="500"/></td>
    <td><div style="width: 120px; height: 120px; overflow: hidden; margin-left: 5px;" >
    <img id="preview" />
    </div></td>
  </tr>
  <tr>
    <td>
  <input type="hidden" id="x" />
  <input type="hidden" id="y" />
  <input type="hidden" id="w" />
  <input type="hidden" id="h" />
  <input type="button" id="submit" value="保存图片" />
    </td>
  </tr>
  </table>
  </body>
</html>



   在JSP页面中写入JS代码不是有好，便将需要的JS写在fileup.js和jQuery.UtrialAvatarCutter.js文件之中；源码就不在这里粘贴了，实际，只要你将JS成功引入之后（能共选择区域），便距离成功不远了，然后你需要的便是到官网查看文档，对你想要进行的操作寻找方法和参数！

  好了，这个令我头痛的实例，不说了，有已经实现的实现源码了，对了，只能在火狐浏览器中运行，本人耐心实在没有，不想去深究为何，感兴趣的下载源码后修改，谁有更好的实现源码，希望留言分享！这个小实例到此为止！