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 strrpos()与strripos()函数
Aug 31 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
Jun 09 PHP
php中HTTP_REFERER函数用法实例
Nov 21 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
Jan 21 PHP
php插入排序法实现数组排序实例
Feb 16 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
Dec 22 PHP
php 如何禁用eval() 函数实例详解
Dec 01 PHP
PHP观察者模式原理与简单实现方法示例
Aug 25 PHP
PHP读取并输出XML文件数据的简单实现方法
Dec 22 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
Oct 10 PHP
基于php+MySql实现学生信息管理系统实例
Aug 04 PHP
imagettftext() 失效,不起作用
Mar 09 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 MySql增删改查的简单实例
2016/06/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
document.compatMode介绍
2009/05/21 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python list多级排序知识点总结
2019/10/23 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
音乐教育感言
2014/03/05 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2014年度工作总结报告
2014/12/15 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB