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开发GUI
Oct 09 PHP
PHP4实际应用经验篇(7)
Oct 09 PHP
一个PHP的String类代码
Apr 20 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
Feb 07 PHP
php实现发送微信模板消息的方法
Mar 07 PHP
php简单实现多字节字符串翻转的方法
Mar 31 PHP
php验证邮箱和ip地址最简单方法汇总
Oct 30 PHP
PHP编写的图片验证码类文件分享
Jun 06 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
Aug 01 PHP
PHP文件管理之实现网盘及压缩包的功能操作
Sep 20 PHP
PHP 二维array转换json的实例讲解
Aug 21 PHP
php面向对象程序设计中self与static的区别分析
May 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
js实现简单的秒表
2020/01/16 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python flask中静态文件的管理方法
2018/03/20 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python安装本地whl的实例步骤
2019/10/12 Python
快速查找Python安装路径方法
2020/02/06 Python
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
追悼会子女答谢词
2014/01/28 职场文书
优质服务演讲稿
2014/05/14 职场文书
认错检讨书
2014/10/02 职场文书
防震减灾主题班会
2015/08/14 职场文书
python实现批量移动文件
2021/04/05 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python