ThinkPHP5+Layui实现图片上传加预览功能

2025-01-30 16:12:04

html代码

<div class="layui-upload">
 <button type="button" class="layui-btn" id="cover">上传封面</button>
</div>
<div class="layui-input-inline">
 <img id="preview" width="200px" height="200px">
</div>

js代码

var uploadInst = upload.render({
  elem:'#cover'
  ,url:'addCourse'
  ,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); //图片地址
    $('#preview').attr('src',result); //图片链接 base64
   });
   // layer.load();
  }
  // 上传成功回调
  ,done:function(res) {
   // console.log(upload);
   console.log(res);
  }
  // 上传失败回调
  ,error:function(index,upload) {
   // 上传失败
  }
 });

php接口

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

总结

以上所述是小编给大家介绍的ThinkPHP5+Layui实现图片上传加预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: <div class="layui-form-item" id="upload_file"> <div class="layui-input-block" style="width: 300px;"> <input t
tp5框架内使用tp3.2分页的方法分析

本文实例讲述了tp5框架内使用tp3.2分页的方法.分享给大家供大家参考,具体如下: tp5内使用tp3.2分页由于百度上面太多坑,所以自己拿来去改了一下下面是完全可行的操作首先吧tp3.2的分页复制出来,拿到tp5 extend文件夹下面的org里面,把tp3.2的分页名称改为Page.php 然后改一下里面的代码下面是改过后的代码 <?php namespace org;//命名规范 class Page{ public $firstRow; // 起始行数 public $list
ThinkPHP5&5.1框架关联模型分页操作示例

本文实例讲述了ThinkPHP5&5.1框架关联模型分页操作.分享给大家供大家参考,具体如下: 利用数据库的分页通常比较简单,但在实际项目中,我们往往需要处理复杂的数据,例如多表操作,这时候我们就需要利用模型层的关联操作得到最终想要的数据,而这些数据我们其实也是可以利用ThinkPHP5&5.1内置的分页引擎进行分页的. 卖的车辆我们称之为车源,车源和车主之间是多对一关系(车主可以有多辆车,一辆车只属于一个车主):车源和车辆图片之间是一对多关系(一辆车有多个图片,一个图片只属于一辆车):车
tp5框架无刷新分页实现方法分析

本文实例讲述了tp5框架无刷新分页实现方法.分享给大家供大家参考,具体如下: 已tp5 分页为例, 1.默认生成的分页页码如下: <ul class="pagination"> <li><a href="?page=1" rel="external nofollow" rel="external nofollow" >«</a></li> <li><
thinkPHP5框架分页样式类完整示例

本文实例讲述了thinkPHP5分页样式类.分享给大家供大家参考,具体如下: 在配置文件中改路径把这段代码放入extend文件下可以在这个文件下创建个page文件在分页的控制器方法中 ->paginate(12,false,[ 'type'=> 'page\Page','var_page'=>'page']); <?php namespace page; // +---------------------------------------------------------
thinkPHP5框架实现基于ajax的分页功能示例

本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5的分页功能介绍参数描述 list_rows 每页数量 page 当前页 path url路径 query url额外参数 fragment url锚点 var_page 分页变量 type 分页类名 $caseDetails = CaseDetails::where(['status'=>1])
thinkPHP5.1框架使用SemanticUI实现分页功能示例

本文实例讲述了thinkPHP5.1框架使用SemanticUI实现分页功能.分享给大家供大家参考,具体如下: 1.config目录下新建paginate.php,下面是文件的内容 <?php //分页配置 return [ 'type' => 'Semantic', 'var_page' => 'page', ]; 2.thinkphp\library\think\paginator\driver\下新建Semantic.php,下面是文件的内容 <?php /** * Crea
thinkPHP5分页功能实现方法分析

本文实例讲述了thinkPHP5分页功能实现方法.分享给大家供大家参考,具体如下: 其实分页自身的内容也不是很多.不过牵扯到样式的问题感觉挺烦.于是找到了分页类看了一下.把大体的结构说一下.如果有需要修改页面样式的可以自行修改样式.最好提前备份,防止意外. 首先是分页的调用,tp5的调用相对非常容易 $mod = new \app\index\model\Blogmsg(); $mo = $mod->paginate(1,14); $this->assign('list', $mo); //
thinkPHP5使用laypage分页插件实现列表分页功能

一.背景在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页.thinkPHP框架中自带了分页功能,但是有缺陷.这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS.CSS等资源.如果页面包含的JS过多.过大,会增加流量压力.因此,我们使用laypage插件.每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面. 二.分页流程如下图所示: 流程说明: 1) 调研App.php中的函数,该函数调用fetch函数.fetch函数渲染list.html.
thinkPHP5框架实现分页查询功能的方法示例

本文实例讲述了thinkPHP5框架实现分页查询功能的方法.分享给大家供大家参考,具体如下: controller文件内Admin.php <?php namespace app\admin\controller; use think\Controller; use app\admin\model\Admin as AdminModel; //使用分页类取别名解决类名冲突 class Admin extends Controller{ public function lst(){ /* 分页开
thinkphp5+layui实现的分页样式示例

本文实例讲述了thinkphp5+layui实现的分页样式.分享给大家供大家参考,具体如下: tp5之layui分页样式 1.分页类路径:\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text *
thinkPHP+LayUI 流加载实现功能

html <div class="layui-container" id="container"> </div> js,要引入layui.js layui.use('flow', function() { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#container' //流加载容器 //滚动条所在元素,一般不用填,此处只是演示需要. ,done: fun

ThinkPHP5+Layui实现图片上传加预览功能

相关推荐

随机推荐