tp5 ajax上传图片

追赶天赋呀~

于 2023-02-23 17:21:47 发布

阅读量189

点赞数

分类专栏： php 文章标签： ajax javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_58954197/article/details/129185920

版权

php 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html代码

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">图片上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <input type="file" id="file" name="file" accept="gif,jpeg,png">
                    <img src="" hidden alt="" id="text" width="100" height="100">
                </div>
            </div>
        </div>

前端代码


        $("#file").on("change",function () {

            var formData = new FormData();
            formData.append('file',this.files[0])
            $.ajax({
                url:'/admin/news/uploads',
                data:formData,
                contentType: false,
                processData: false,
                type:'post',
                dataType:'json',
                success:function (res) {
                     if (res.code==200){
                         $('img').show();
                         $('img').attr('src','http://bhts.tjbinhang.cn/'+res.data);
                         layer.msg(res.msg,{icon:1,time:1500})
                     }else {
                         layer.msg(res.msg,{icon:2,time:1500})
                     }
                }
            })
        })

后端代码

    public function uploads()
    {
        $file = request()->file('file');

        if ($file){
            $info = $file->validate(['ext'=>'jpg,png,gif,jpeg'])->move(ROOT_PATH . 'public' . DS . 'uploads');

            $result = 'uploads'.'/'.$info->getSaveName();
            if (!empty($result)){

                Log::insert($log);
                return json(['code'=>200,'msg'=>'上传成功','data'=>$result]);
            }else{

                return json(['code'=>500,'msg'=>'上传失败','data'=>null]);
            }
        }
    }