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操作Memcache实例介绍
Jun 14 PHP
关于PHP session 存储方式的详细介绍
Jun 25 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
Aug 07 PHP
PHP 验证码不显示只有一个小红叉的解决方法
Sep 30 PHP
php四种基础算法代码实例
Oct 29 PHP
PHP使用memcache缓存技术提高响应速度的方法
Dec 26 PHP
php实现将任意进制数转换成10进制的方法
Apr 17 PHP
PHP错误处理函数register_shutdown_function使用示例
Jul 03 PHP
php二维码生成以及下载实现
Sep 28 PHP
php通过header发送自定义数据方法
Jan 18 PHP
PHP与以太坊交互详解
Aug 24 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
Oct 31 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实现ping
2006/10/09 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
JS 统计时间
2021/03/09 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
requireJS使用指南
2016/04/27 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
益达广告词
2014/03/14 职场文书
股权收购意向书
2014/04/01 职场文书
家长寄语大全
2014/04/02 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL