ajax图片上传功能的实现

实现：上传图片文件时，可直接显示在前端，看到效果

结果：

 

代码部分如下：

代码已整理好：可下载部署到项目里，需要注意的是要引入一个js文件

/****************************************************************************************************/
html部分

<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>

/****************************************************************************************************/
js部分

<script src="HOME_URL/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部分
<?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"=>"上传失败")));
            } 
        }
    }

?>

 

转载于:https://my.oschina.net/mikelp/blog/1329841