TP 5 上传图片回显 （AJAX异步上传图片TP5)

 

直接上代码

PHP代码如下

 

/**
     * 上传
     */
    public function upload_photo(){
        $file = $this->request->file('file');
        $uid = session('ydyl_weixin_user.id');
        // if(empty($uid)){
        //     return ['code'=>404,'msg'=>'用户未登录'];
        // }
                if(!empty($file)){
                    // 移动到框架应用根目录/public/uploads/ 目录下
                    $info = $file->validate(['size'=>1048576,'ext'=>'jpg,png,gif'])->rule('uniqid')->move(ROOT_PATH . 'public' . DS . 'uploads');
                    $error = $file->getError();
                    //验证文件后缀后大小
                    if(!empty($error)){
                        dump($error);exit;
                    }
                    if($info){
                        // 成功上传后 获取上传信息
                        // 输出 jpg
                        $info->getExtension();
                        // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                        $info->getSaveName();
                        // 输出 42a79759f284b767dfcb2a0197904287.jpg
                        $photo = $info->getFilename();

                    }else{
                        // 上传失败获取错误信息
                        $file->getError();
                    }
                }else{
                    $photo = '';
                }
        if($photo !== ''){
            return ['code'=>1,'msg'=>'成功','photo'=>$photo];
        }else{
            return ['code'=>404,'msg'=>'失败'];
        }
    }

 

HTML代码如下

 

<div class="upload-btn">
    <input type="file" name="pic1" id="pic" accept="image/gif,image/jpeg,image/x-png"/>
</div>
<script>
    //上传图片
    $('#pic').change(function(event) {
        var formData = new FormData();
        formData.append("file", $(this).get(0).files[0]);
        $.ajax({
            url:'http://www.juplus.cn/vdma/index/ydyl/upload_photo',
            type:'POST',
            data:formData,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            success:function(data){
                console.log(data)
            }
        });
    });
</script>