jcrop实现图片区域选择、裁剪及上传

首先说明需要引入哪些文件：

jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js

其次说明需要哪些页面：

前端：

1.显示图片以及选择区域的页面resume_avatar.html, 部分代码如下：

1.1图片显示

  <div id="imgPreview" style="max-width:400px;min-height:200px;">
     <img   src="demo.jpg"  id="target" alt="头像预览" style="width:100%;"  class="target" />
  </div>

  <div id="preview-pane">
    <div class="preview-container" >
      <img   src="demo.jpg"  class="jcrop-preview" alt="头像预览" />
    </div>
  </div>

1.2图片的更换

html代码

          <form action="{:U('Index/do_resume_avatar')}" method="post" model-node='account_save' enctype='multipart/form-data' id="form1">
            <dl class="form-set"