ajax+php图片上传

<div>上传照片</div>
<div class="mikezz">
	<img class="normalFace"  src="WEIXIN_URL/img/imgs/register_upload_photo@2x.png" οnclick="fileSelect();"><br/>
	<span>照片</span>
	<input type="file" name="photo" id="photo" class="filepath" style="display:none;">
</div>
<script src="./js/jquery.min.js"></script> 
<script src="./js/lrz.all.bundle.js"></script>
<script type="text/javascript">
    //点击绑定
    function fileSelect(){
        document.getElementById("photo").click();
    }
	//图片生成并展示
    $(function(){
        $(document).on('change','.filepath', function(e) {
            var str = $(this).attr("name");
            lrz(this.files[0], {width: 640,quality:0.92})
            .then(function (rst) {
                $.ajax({
                    url: "{{:U('Home/User/upload')}}",
                    type: 'post',
                    data: {image: rst.base64,zd:str},
                    dataType: 'json',
                    enctype: 'multipart/form-data',
                    success: function (data) {
                        var obj = eval("("+data+")");
                        if (0 == obj.status) {
                            return false;
                        }else{
                            $(".normalFace").css('padding-top','0px');
                            var src= obj.url;
                            $("input[name="+str+"]").parent().children("img").attr("src",src); 
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败 
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
            })
            .catch(function (err) {

            })
            .always(function () {

            });

        });
    });
</script>

<?php
	//获取图片
    public function upload(){
        if(IS_AJAX){
            $base64_image_content = $_POST['image']; 
            $zd=$_POST['zd'];
            if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
                $img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流
            }
            $savename = uniqid().'.jpg';
            $fileDir ="./Public/pic/".date("Y-m-d")."/";     //==>定义上传路径
            // $file="/opt/lampp/htdocs/gonggup/".$fileDir;    ==>如果上传到线上,可能会需要此处来追加定义上传路径
            if(!is_dir($fileDir)){
                @mkdir($fileDir,0777,true);                  //==>图片读写权限,一般都是最大:0777
            }
            
            $savepath = $fileDir.$savename;                  //==>保存路径
            $ifp = fopen($savepath, "wb" ); 
            fwrite( $ifp,$img); 
            fclose( $ifp );
            if($savepath){  
                // $_SESSION['info'][$zd] = $fileDir.$savename; //==>对图片“路径+文件名”进行处理,可存session进行下一次取值处理,也可以直接存数据库相关的表中
                $this->ajaxReturn(json_encode(array("status"=>1,"content"=>"上传成功","url"=>$base64_image_content)));             
            }else{
                $this->ajaxReturn(json_encode(array("status"=>0,"content"=>"上传失败")));
            } 
        }
    }

?>


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值