thinkphp5图片上传功能+layui图片上传预览

青茶360

已于 2022-06-07 16:33:17 修改

阅读量612

点赞数

分类专栏： thinkphp5常用功能文章标签： layui thinkphp5 javascript 前端

于 2022-06-04 10:45:01 首次发布

本文链接：https://blog.csdn.net/NCZB007/article/details/125119290

版权

thinkphp5常用功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了如何在ThinkPHP5框架下实现图片上传功能，并结合Layui库进行图片预览。内容包括HTML表单创建、JavaScript处理以及后台控制器的上传类代码，旨在为网站提供一个用户友好的图片上传和预览解决方案。

摘要由CSDN通过智能技术生成

功能：tp5图片上传+layui图片预览

技能：tp5图片上传，layui

环境：thinkphp5

描述：网站中很多表单都会用到上传图片，logo，照片，用户也会上传图片，这个时候网站就需要一个上传图片的功能，而且在上传后希望能预览一下看上传的对不对。

功能分3部分：第1部分html表单部分，第2部分js部分，第3部分后台上传类

第一部分html表单页面：

<div class="layui-form-item">
      <label class="layui-form-label">logo</label>
      <div class="layui-input-inline">
        <input class="layui-upload-file" type="file" accept="images" name="file">
        <input type="text" name="logo" id="logo-name" lay-verify="required2" placeholder="请上传图片" autocomplete="off" class="layui-input" >
      </div>
      <button style="float: left;" type="button" class="layui-btn" id="upload-logo">上传图片</button> 
      <div style="float:left;margin-left: 5px;">
        <img height="46px" width="46px" style="border-radius: 50%;" id="ico">
      </div>
    </div>

第二部分js代码：

//本地图片上传
    upload.render({
      elem: '#upload-logo'
      ,url: '{:url("admin/Links/upload")}'
      ,accept: 'images'
      ,method: 'get'
      ,acceptMime: 'image/*'
      ,done: function(res){
        //console.log(res);
        if(res.code == 1){
          $('#logo-name').val(res.img);//图片值
          $('#ico').attr('src','__UPLOADS__'+res.img);//图片预览
          layer.msg(res.msg,{time:2000});
        }else{
          layer.msg(res.msg,{time:2000});
        }
      }
    });

第三部分后台控制器上传类：

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

功能案例效果图：