photoclip 移動端多圖片裁剪及上傳+layer彈出層

<script src="{THEME_STYLE_PATH}member/cutphoto/html5shiv.min.js"></script>
<script src="{THEME_STYLE_PATH}member/cutphoto/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="{THEME_STYLE_PATH}member/cutphoto/jquery-2.1.1.min.js"><\/script>')</script>
<script src="{THEME_STYLE_PATH}member/cutphoto/iscroll-zoom.js"></script>
<script src="{THEME_STYLE_PATH}member/cutphoto/hammer.js"></script>
<script src="{THEME_STYLE_PATH}member/cutphoto/jquery.photoClip.js"></script> 
        	<div class="com-upload-box">
            <a href="javascript:;" id="company-logo"><img src='<?php echo $info["logo"]?>'  class="upimgs"></a>
            <div class="filebox">
                <div class="fileboxtitle">上傳企業logo</div>
                <input   class="file"  type="file" accept="image/*" multiple  id="file1"/>
            </div>
        </div>
        <div class="com-upload-box" style="border-bottom: 1px solid #f1f1f1">
            <a href="javascript:;" id="licenseimg"><img src='<?php echo $info["logo"]?>'  class="upimgs"></a>
            <div class="filebox">
                <div class="fileboxtitle">上傳營業執照</div>
                <input class="file" type="file" accept="image/*" multiple  id="file2"/>
            </div>
        </div>
<script>
    $(function(){
      var obj = '';
        //獲取圖片點擊對象
        $(".file").click(function(){
            obj = $(this);
        });
        //裁剪圖片
        $("#clipArea").photoClip({
            width: 280,
            height: 280,
            file: "#file1,#file2",
            ok: "#clipBtn",
            loadStart: function() {
                //loading帶文字
                layer.open({ type: 2,content: '照片讀取中'});
            },
            loadComplete: function() {
                layer.closeAll();
                $(".htmleaf-container").fadeIn('fast');
                $("#dpage").addClass("show");
            },
            clipFinish: function(dataURL) {
                layer.open({type: 2,shadeClose: false,content: '正在上傳…'});
                $.ajax({
                    type:'POST',
                    url:'/attachment/attachment/companyimg.html',
                    data:{'file':dataURL},
                    success:function (d) {
                        layer.closeAll();
                        if(d.status==1){
                           obj.parent('.filebox').prev('a').find('img').attr('src',d.url);
                        }else{
                            return showerr(d.msg);
                        }
                    },
                    dataType:'json'
                });
            }
        });
        //取消圖片裁剪
        $('#cancelBtn,.qx').click(function(){
            $('.htmleaf-container').hide();
            $("#dpage").removeClass("show");
        });
    })
</script>
    //會員頭像上傳
    public function companyimg(){
        $result=['status'=>0,'msg'=>''];
        $img_base64=input('post.file');
        $path = "./uploadfile/comimg/";
        if(!is_writable($path)){
            $result['msg']='目錄沒有寫權限!';
            goto _end;
        }
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $img_base64, $img)){
            $src=$path . time() . rand(1000000, 9999999);
            $pic_url =$src.'.jpg';
            if (file_put_contents($pic_url, base64_decode(str_replace($img[1], '', $img_base64)))){
                $image=Image::open($pic_url);
                $image1=Image::open($pic_url);
                $image->thumb(800,800)->save($pic_url,'jpg',100);
                $image1->thumb(120, 120)->save($src.'.png','png');
                clearstatcache();
                $result=['status'=>1,'msg'=>'圖片上傳成功!','url'=>substr($src.'.jpg',1)];
            }else{
                $result=['status'=>0,'msg'=>'圖片上傳失敗!'];
            }
        }
        _end:
        exit(json_encode($result));
    }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章