Thinkphp框架+Layui实现图片/文件上传功能分析


Posted in PHP onFebruary 07, 2020

本文实例讲述了Thinkphp框架+Layui实现图片/文件上传功能。分享给大家供大家参考,具体如下:

在项目中用到了,再网上找了现成的代码都是借口异常或者非法上传,所以在一番摸索搞定之后拿来和大家分享。

html:

<form class="layui-form layui-form-pane" action="" style="margin-top:20px;" enctype="multipart/form-data">
  <center>
    <div class="layui-upload-drag" id="uploadBanner">
      <img class="layui-upload-img" id="upload-photo">
      <i class="layui-icon" id="upload-icon">?</i>
      <p>点击上传,或将文件拖拽到此处</p>
      <p>建议尺寸1920*512</p>
    </div>
    <input type="hidden" id="res" name="banner_photo" value="" lay-verify="required" />
    <div class="layui-form-item" style="margin-top:10px;">
      <button class="layui-btn" lay-submit="" lay-filter="sub">提交</button>
    </div>
    <div id="demoText"></div>
  </center>
</form>

JS:

layui.use('upload', function(){
  var $ = layui.jquery
    ,upload = layui.upload;
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#uploadBanner'
    ,url: "{:U('Api/doUploadPic')}"
    ,before: function(obj){
      //预读本地文件示例,不支持ie8
      obj.preview(function(index, file, result){
        $('#upload-photo').attr('src', result); //图片链接(base64)
        $('#upload-photo').attr('style', 'height:10rem;');
        $('#upload-icon').attr('style','display:none;');
      });
    }
    ,done: function(res, index, upload){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      console.log("成功啦!" + obj2string(res) + "  " + index + "  " + upload);
    }
    ,error: function(){
      //演示失败状态,并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});

PHP接口:

public function doUploadPic()//上传模块
  {
    $upload = new \Think\Upload();
    $upload->maxSize = 3145728;
    $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
    $upload->rootPath = './Public/'; // 设置附件上传根目录
    $upload->savePath = 'upload/'; // 设置附件上传子目录
    $info = $upload->upload();
    if(!$info){
      $this->error($upload->getError());
    }else{
      foreach($info as $file){
      $data = '/Public'.$file['savepath'] . $file['savename'];
      $file_a=$data;
      echo '{"code":0,"msg":"成功上传","data":{"src":"'.$file_a.'"}}';
      }
    }
  }

图片就上传到/Public/upload文件夹下了:

Thinkphp框架+Layui实现图片/文件上传功能分析

Thinkphp框架+Layui实现图片/文件上传功能分析

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
PHP 生成的XML以FLASH获取为乱码终极解决
Aug 07 PHP
php输入流php://input使用示例(php发送图片流到服务器)
Dec 25 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
May 05 PHP
Smarty模板学习笔记之Smarty简介
May 20 PHP
PHP排序算法类实例
Jun 17 PHP
thinkphp autoload 命名空间自定义 namespace
Jul 17 PHP
php提交post数组参数实例分析
Dec 17 PHP
php cookie 详解使用实例
Nov 03 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
Apr 01 PHP
php mysql PDO 查询操作的实例详解
Sep 23 PHP
php两点地理坐标距离的计算方法
Dec 29 PHP
详解no input file specified 三种解决方法
Nov 29 PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 #PHP
php测试kafka项目示例
Feb 06 #PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
Feb 06 #PHP
PHP实现常用排序算法的方法
Feb 05 #PHP
PHP ElasticSearch做搜索实例讲解
Feb 05 #PHP
PHP实现新型冠状病毒疫情实时图的实例
Feb 04 #PHP
php post换行的方法
Feb 03 #PHP
You might like
PHP个人网站架设连环讲(一)
2006/10/09 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
详解php中的implements 使用
2017/06/13 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
12步教你理解Python装饰器
2016/02/25 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
离婚协议书该怎么写
2014/10/04 职场文书
小学感恩节活动总结
2015/03/24 职场文书
教务处教学工作总结
2015/08/10 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
Python代码实现双链表
2022/05/25 Python