移动端h5头像上传、头像裁切、上传图片

初步想的步骤是这样的：

一、点击头像区域选择本地图片

二、显示被选本地图片显示裁剪选取框

三、确认选取后，上传到阿里云返回路径

四、初始点击区域显示裁剪完成的图片

代码片段

 <div align="center" class="face">
    <img src="images/pic06.jpg">/*默认头像*/<pre name="code" class="html">    <form name="form0" id="form0" >/*选取本地图片的input 相对于face盒子定位、宽高100% 透明度0*/

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">			</span><input type="file" name="file0" id="file0" multiple="multiple" /><br></span>

</form> </div>

    提前准备好剪切层的盒子样式和排版

以上截图右侧内容仅供参考，具体代码就是下面这一点，其他的盒子都是插件自己生成的，排版无需添加<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" />

<div class="img-container">  
      <img id="img0"  src="">  
      <div class="close qxooo" >取消</div>
      <div class="saveBtn">选取</div>
</div>