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


Posted in PHP onAugust 17, 2018

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实现图片上传加预览功能

总结

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

PHP 相关文章推荐
php 生成WML页面方法详解
Aug 09 PHP
PHP输出时间差函数代码
Jan 28 PHP
php实现简单洗牌算法
Jun 18 PHP
php批量更改数据库表前缀实现方法
Oct 26 PHP
CodeIgniter基本配置详细介绍
Nov 12 PHP
单台服务器的PHP进程之间实现共享内存的方法
Jun 13 PHP
php获取URL中带#号等特殊符号参数的解决方法
Sep 02 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
Nov 03 PHP
Yii核心组件AssetManager原理分析
Dec 02 PHP
php+xml实现在线英文词典之添加词条的方法
Jan 23 PHP
php使用Session和文件统计在线人数
Jul 04 PHP
PHP实现的观察者模式实例
Jun 21 PHP
PHP实现类似题库抽题效果
Aug 16 #PHP
php实现的rc4加密解密类定义与用法示例
Aug 16 #PHP
Laravel框架实现定时发布任务的方法
Aug 16 #PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
Aug 16 #PHP
Laravel中的chunk组块结果集处理与注意问题
Aug 15 #PHP
PHP curl批处理及多请求并发实现方法分析
Aug 15 #PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
Aug 15 #PHP
You might like
劣质的PHP代码简化
2010/02/08 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
Python读大数据txt
2016/03/28 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python3爬虫怎样构建请求header
2018/12/23 Python
详解python itertools功能
2020/02/07 Python
python实现最速下降法
2020/03/24 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python 如何在测试中使用 Mock
2021/03/01 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
百思买美国官网:Best Buy
2016/07/28 全球购物
小区文明倡议书
2014/05/16 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
个人催款函范文
2015/06/24 职场文书
三八节祝酒词
2015/08/11 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python