tp5框架使用layui实现文件上传(上代码)

最新推荐文章于 2024-04-29 06:58:38 发布

原创最新推荐文章于 2024-04-29 06:58:38 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传

本文通过实例代码详细介绍了如何在ThinkPHP5框架下结合layui前端组件实现文件上传功能，包括HTML、JavaScript和PHP后端的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<div class="layui-upload">
   <button type="button" class="layui-btn" id="cover1">上传头像</button>
</div>
<div class="layui-input-inline">
    <img id="preview1" width="200px" height="200px" >
</div>
<input type="hidden" name="head_photo" id="head_photo1">
<div>(上传限制在2M内)</div>

js代码

//添加学生头像
layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var uploadInst = layui.upload.render({
        elem:'#cover1'
        ,url:"{:url('Student/upload')}"
        ,accept:'file'  // 允许上传的文件类型
        ,auto:true // 自动上传
        ,before:function (obj) {
            console.log(obj);
            // 预览
            obj.preview(function(index,file,result) {
                // console.log(file.name);    //图片名字
                // console.log(file.type);    //图片格式
                // console.log(file.size);    //图片大小
                // console.log(result);    //图片地址
                $('#preview1').attr('src',result); //图片链接 base64
            });
            // layer.load();
        }
        // 上传成功回调
        ,done:function(res) {
            // console.log(upload);
            //console.log(res);
            $('#head_photo1').val(res.msg);
            //console.log($('#head_photo').val());
        }
        // 上传失败回调
        ,error:function(index,upload) {
            // 上传失败
        }

    });
});

php代码

//上传
    public function upload()
    {

        $file = request()->file('file');
         // 移动到框架应用根目录/public/uploads/ 目录下
         $info = $file->move('public/upload/');
         if ($info) {
             $path = '/public/upload/'.$info->getSaveName();
             return return_succ($path);
         }
    }