会员中心上传头像时的，上传图片并剪切

可以在我的资源下载：http://download.csdn.net/detail/qq_33769914/9875716（会员中心上传头像时的，上传图片并剪切）

似乎没有压缩，只在本地看的话还是好的，但是上传给服务器可能就没有加载完就上传了。所以用的时候还是考虑一下

我引入5个js却隐藏了3个，原因是.//   这个upimg.js是我把上面三个js放在一起了，这样占得内存少一点 

        <script src="js/jquery-2.1.3.min.js"></script>
     <!--

           <script src="js/iscroll-zoom.js"></script>     缩放功能
            <script src="js/hammer.js"></script>      点击、滑动、拖动、多点触控等事件

            <script src="jquery.photoClip.min.js"></script>  剪切图片，它的使用是依托于前两个的

       -->

    <script src="js/upimg.js"></script>    //三个的综合

  <div class="im">
           <div class="pic">
              <!--  goods_image_area 上传以后显示的预览图 -->
              <div id="goods_image_area" class="image"></div>     
                <!-- //起始显示的，剪切以后的 -->
               <div id="goods_image_view" class="view">
                  <input type="file" id="goods_image" class="goods_image" name="goods_image"/>   
               </div>
             <button id="goods_image_btn" type="button" class="cut">完成</button>

         </div>              
        </div>

                     $("#goods_image_area").photoClip({
                            // width: width,
                            // height: height,
                            file: "#goods_image",   //
                            view: "#goods_image_view",
                            ok: "#goods_image_btn",
                            loadStart: function() {
                                console.log("照片读取中");
                            },
                            loadComplete: function() {
                                console.log("照片读取完成");
                            },
                            clipFinish: function(dataURL) {
                                var srcpic=$("#goods_image_view").attr("src")
                                $("#goods_image_area").attr("src",srcpic) ;
                                console.log(dataURL)  //图片的路径
                                // $.ajax({
                                //     url: "upload.php",
                                //     data: {name: dataURL.substring(27),id:name},
                                //     type: 'post',
                                //     // dataType: 'html',
                                // })
                            }
                        });

//也就是选择好了图片                   
                    $("input[type='file']").change(function(){
                        $("#goods_image_view").css('display','none');
                        $(".image").css('display','none');
                        $("#goods_image_area").css('display','block');
                      //  $("#goods_image_view").css('display','block');
                        $("#goods_image_btn").css('display','block');
                    });

//点击完成，当前按钮隐藏。只显示剪切之后的图片
                    $("#goods_image_btn").click(function(){  
                        $(this).hide()
                       $("#goods_image_area").hide();
                       $("#goods_image_view").show(); 
                    });
                        
            });