AJAX异步上传图片(TP5)

心已赠人 2022-05-08 08:44 338阅读 0赞

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>