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 相关文章推荐
基于mysql的bbs设计(三)
Oct 09 PHP
php 深入理解strtotime函数的使用详解
May 23 PHP
php之CodeIgniter学习笔记
Jun 17 PHP
学习php过程中的一些注意点的总结
Oct 25 PHP
php获取网页标题和内容函数(不包含html标签)
Feb 03 PHP
详解PHP导入导出CSV文件
Nov 03 PHP
php简单统计字符串单词数量的方法
Jun 19 PHP
php实现的redis缓存类定义与使用方法示例
Aug 09 PHP
使用ucenter实现多站点同步登录的讲解
Mar 21 PHP
PHP反射实际应用示例
Apr 03 PHP
PHP中isset、empty的用法与区别示例详解
Nov 05 PHP
php TP5框架生成二维码链接
Apr 01 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 过滤器实现代码
2010/08/09 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php导入模块文件分享
2015/03/17 PHP
CI框架常用方法小结
2016/05/17 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
教师节横幅标语
2014/10/08 职场文书
行政司机岗位职责
2015/04/10 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python