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 syntax error, unexpected $end 错误的一种原因及解决
Oct 25 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
Dec 28 PHP
ThinkPHP实现将本地文件打包成zip下载
Jun 26 PHP
PHP使用json_encode函数时不转义中文的解决方法
Nov 12 PHP
php递归删除指定文件夹的方法小结
Apr 20 PHP
php生成图片验证码
Jun 09 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
May 17 PHP
php魔法函数与魔法常量使用介绍
Jul 23 PHP
PHP中检查isset()和!empty()函数的必要性
Feb 13 PHP
php fread函数使用方法总结
May 28 PHP
laravel框架 laravel-admin上传图片到oss的方法
Oct 13 PHP
php命令行模式代码实例详解
Feb 26 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
11个PHP 分页脚本推荐
2011/08/15 PHP
关于crontab的使用详解
2013/06/24 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JS Timing
2007/04/21 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Win10下Python环境搭建与配置教程
2016/11/18 Python
git进行版本控制心得详谈
2017/12/10 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
报关简历自我评价怎么写
2013/09/19 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
初一地理教学反思
2014/01/16 职场文书
会计专业自我评价
2014/02/12 职场文书
市场部经理岗位职责
2014/04/10 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
毕业欢送会致辞
2015/07/29 职场文书