tp5.1使用layui上传图片

最新推荐文章于 2024-06-03 09:49:31 发布

php菜鸟爱好者

最新推荐文章于 2024-06-03 09:49:31 发布

阅读量322

点赞数 2

分类专栏： php学习文章标签： php html javascript jquery

本文链接：https://blog.csdn.net/ajxaxnaax/article/details/109060400

版权

php学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果如下:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1" width="30">
        <p id="demoText"></p>
    </div>
</div>
<script src="/static/layui/layui.all.js"></script>
<script>
    layui.use(['upload'], function(){
        var upload = layui.upload;
        var $=layui.jquery;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/test/layui/ajaxupload' //上传接口
            ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
            ,done: function(res){
                console.log(res);
            }
            ,error: function(){
                //请求异常回调
            }
        });
        });
</script>
</body>

php后端代码如下

 public function upload(){
        return view();
    }

    public function ajaxupload(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $file->move( '../public/static/uploads');
        if($info){
            // 成功上传后 获取上传信息
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            $data['data']= ['src'=>$info->getSaveName()];
            $data['code']=0;
            $data['msg']='上传成功';
            echo json_encode($data);
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }

php菜鸟爱好者

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
tp5.1使用layui上传图片

效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>upload</title> <link rel="stylesheet" href="/static/layui/css/layui.css"></head><body><div class="layui-upl
复制链接

扫一扫