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 iconv函数的使用详解
Jun 09 PHP
php导入模块文件分享
Mar 17 PHP
PHP实现加强版加密解密类实例
Jul 29 PHP
Smarty模板简单配置与使用方法示例
May 23 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
Aug 12 PHP
总结PHP中数值计算的注意事项
Aug 14 PHP
PHP文件下载实例代码浅析
Aug 17 PHP
php实现连接access数据库并转txt写入的方法
Feb 08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
Nov 10 PHP
Laravel 加载第三方类库的方法
Apr 20 PHP
ThinkPHP5框架实现简单的批量查询功能示例
Jun 07 PHP
PHP文件上传小程序 适合初学者学习!
May 23 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+xslt在windows平台上
2006/10/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Javascript模块模式分析
2008/05/16 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python多进程机制实例详解
2015/07/02 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
实例详解Python装饰器与闭包
2019/07/29 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python如何实现FTP功能
2020/05/28 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
EJB的基本架构
2016/09/22 面试题
历史专业学生的自我评价
2014/02/28 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
升学宴祝酒词
2015/08/11 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS