cropper裁切图片并预览上传(1)

在做公司后台管理系统时，有一个新的需求，就类似我们注册网站时上传，修改头像的功能。
使用的是裁切插件cropper.js，gitHub链接：https://github.com/fengyuanchen/cropper/blob/master/README.md
根据官网文档和网上一些cropper相关的博客文章，很容易就做出了上传图片——裁切——保存的功能。
代码贴一下：（这里根据产品设计需求，做了input的样式改变，和再次上传图片功能）

结构部分：
<div class="form-group">
     <label class="col-lg-2 control-label">
     <span class="redTip">*</span>   
     缩略图</label>
     <div class="col-lg-10 imgBox"  style="height:410px" >
         <div style="width:360px;height:360px" class="cropdiv">
             <div id="imgCho" style="display: block;">
               <a class="choBtn" href="javascript:void(0);" style="margin-top:140px;">
                 <em>+</em>选择图片
                  <input type="file" name=""  class="uploadImg" id="uploadImg" file-model="myFile">
               </a>
               <p>支持JPG、PNG、GIF</p>
             </div>
             <img src="" id="image" style="display:none;float:left;width:188px;height:120px" >
         </div>
         <a class="choBtn2" href="javascript:void(0);" style="margin-top:140px;">
                 <em>+</em>重新选择