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实现多级树型菜单
Oct 09 PHP
php生成EXCEL的东东
Oct 09 PHP
PHP下一个非常全面获取图象信息的函数
Nov 20 PHP
PHP求小于1000的所有水仙花数的代码
Jan 10 PHP
配置php网页显示各种语法错误
Sep 23 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
Mar 18 PHP
PHP中file_exists使用中遇到的问题小结
Apr 05 PHP
PHP读取mssql json数据中文乱码的解决办法
Apr 11 PHP
PHP获取页面执行时间的方法(推荐)
Dec 10 PHP
PHP编程 SSO详细介绍及简单实例
Jan 13 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
Aug 28 PHP
设定php简写功能的方法
Nov 28 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
详解参数传递四种形式
2015/07/21 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python坐标线性插值应用实现
2019/11/13 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
优秀毕业大学生推荐信
2013/11/13 职场文书
初中物理教学反思
2014/01/14 职场文书
导游实习生自荐书
2014/01/28 职场文书
消防安全责任书范本
2014/04/15 职场文书
关于安全的标语
2014/06/10 职场文书
教师求职自荐书
2014/06/14 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书