Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】


Posted in PHP onMay 08, 2019

本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能。分享给大家供大家参考,具体如下:

今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件。其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的。

这个插件不仅仅支持图片上传,还支持大多数文件的上传,例如视频文件,音频文件,word文件等等,而且大文件都采用分片上传的机制。

Plupload有以下功能和特点:

1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。

下面就介绍一个tp5整合plupload图片上传插件的小案例,希望给大家带来一点小帮助。

一、案例目录结构

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

二、Index.php控制器方法

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Index extends Controller{
  public function index(){
    $rootUrl = $this->request->root(true); //ROOT域名
    $rootUrl = explode('index.php',$rootUrl)[0];
    //模板资源变量分配
    foreach (config('TMPL_PARSE_STRING') as $key => $value) {
      $this->view->assign('_'.$key,$rootUrl.$value);
    }
    return $this->fetch();
  }
  //图片上传方法
  public function upload_images(){
    if($this->request->isPost()){
      //接收参数
      $images = $this->request->file('file');
      //计算md5和sha1散列值,TODO::作用避免文件重复上传
      $md5 = $images->hash('md5');
      $sha1= $images->hash('sha1');
      //判断图片文件是否已经上传
      $img = Db::name('picture')->where(['md5'=>$md5,'sha1'=>$sha1])->find();//我这里是将图片存入数据库,防止重复上传
      if(!empty($img)){
        return json(['status'=>1,'msg'=>'上传成功','data'=>['img_id'=>$img['id'],'img_url'=>$this->request->root(true).'/'.$img['path']]]);
      }else{
        // 移动到框架应用根目录/public/uploads/picture/目录下
        $imgPath = 'public' . DS . 'uploads' . DS . 'picture';
        $info = $images->move(ROOT_PATH . $imgPath);
        $path = 'public/uploads/picture/'.date('Ymd',time()).'/'.$info->getFilename();
        $data = [
          'path' => $path ,
          'md5' => $md5 ,
          'sha1' => $sha1 ,
          'status' => 1 ,
          'create_time' => time() ,
        ];
        if($img_id=Db::name('picture')->insertGetId($data)){
          return json(['status'=>1,'msg'=>'上传成功','data'=>['img_id'=>$img_id,'img_url'=>$this->request->root(true).'/'.$path]]);
        }else{
          return json(['status'=>0,'msg'=>'写入数据库失败']);
        }
      }
    }else{
      return ['status'=>0,'msg'=>'非法请求!'];
    }
  }
}

三、index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tp5+plupload图片上传</title>
</head>
<body>
<!-- production -->
<!--<script type="text/javascript" src="./plupload.full.min.js"></script>-->
<!-- debug-->
<script type="text/javascript" src="{$_plupload}/moxie.js"></script>
<script type="text/javascript" src="{$_plupload}/plupload.dev.js"></script>
<script type="text/javascript" src="{$_plupload}/jquery.min.js"></script>
<style>
  ul{
    list-style:none;
  }
  #file-list {overflow: hidden;padding-left: initial;}
  #file-list li {
    width:160px;
    float: left;
    height:200px;
    position: relative;
    height: inherit;
    margin-bottom: inherit;
  }
  #file-list li a {
    width:150px;
    height:150px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 auto;
    border:1px solid #ccc;
    padding: 5px 5px 5px 5px;
  }
  .close{
    background-image: url("{$_plupload}/close.png");
    width: 30px;
    height: 30px;
    background-size: contain;
    position: absolute;
    right: 2%;
    top: 0;
  }
  #file-list li a img {max-width:100%;max-height: 100%;}
  .progress{
    position: absolute;
    background-color: rgba(4, 4, 4, 0.53);
    color: #fff;
    padding: 3px 3px 3px 3px;
    border-radius: 10%;
  }
</style>
<input type="hidden" id="images_upload" name="images" value=""/>
<div id="container">
  <button class="btn btn-primary" type="button" id="pickfiles" style="height: 30px;line-height: 8px;">选择图片</button>
  <button class="btn btn-primary" type="button" id="uploadfiles" style="display: none">开始上传</button>
  <ul id="file-list">
  </ul>
</div>
<script type="text/javascript">
  //调用例子
  var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',//上传方式顺序优先级
    browse_button : 'pickfiles',//选择图片按钮id
    container: document.getElementById('container'),//容器
    url : "{:url('Index/upload_images')}",//服务器接口地址
    flash_swf_url : "{$_plupload}/Moxie.swf",
    silverlight_xap_url : "{$_plupload}/Moxie.xap",
    multi_selection: true,//false为单图上传,true为多图上传
    filters : {
      max_file_size : '100mb',//限制文件上传大小
      mime_types: [
        {title : "Image files", extensions : "jpg,gif,png"},//限制文件上传格式
      ]
    },
    init: {
      //init事件发生后触发
      PostInit: function() {
        //document.getElementById('filelist').innerHTML = '';
        document.getElementById('uploadfiles').onclick = function() {
          uploader.start();
          return false;
        };
      },
      FilesAdded: function(up, files) {//文件选择之后的触发的方法
        var len = len = files.length;
        for(var i = 0; i<len; i++){
          var file_name = files[i].name; //文件名
          var file_size = files[i].size;//文件大小
          //构造html来更新UI
          //var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '(' + plupload.formatSize(file_size) + ')' + '</p><p class="progress"></p></li>';
          var html = '<li id="file-' + files[i].id +'"><span class="close"></span></li>';
          $(html).appendTo('#file-list');
          !function(i){
            previewImage(files[i],function(imgsrc){
              $('#file-'+files[i].id).append('<a><img src="'+ imgsrc +'" /><span class="progress">12</span></a>');
            })
          }(i);
          $("#uploadfiles").trigger('click');
        }
        /*plupload.each(files, function(file) {
         document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
         });*/
      },
      UploadProgress: function(up, file) {//上传过程中调用的方法
        //document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        $('#file-'+file.id +" .progress").html(file.percent + "%");
      },
      FileUploaded : function (up,file,res) {//文件上传完成后
        console.log(res.response);
        var data = JSON.parse(res.response).data;
        $('#file-'+file.id).children('.close').attr('img_id',data.img_id);
        var img = $("#images_upload");
        var str = img.val();
        if(str == ''){
          str = data.img_id;
        }else{
          str += ','+data.img_id;
        }
        img.val(str);
      },
      Error: function(up, err) {
        //document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
      }
    }
  });
  //plupload中为我们提供了mOxie对象
  //有关mOxie的介绍和说明请看:https://github.com/moxiecode/moxie/wiki/API
  //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
  function previewImage(file,callback){
    if(!file || !/image\//.test(file.type)) return; //确保文件是图片
    if(file.type=='image/gif'){ //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
      var gif = new moxie.file.FileReader();
      gif.onload = function(){
        callback(gif.result);
        gif.destroy();
        gif = null;
      };
      gif.readAsDataURL(file.getSource());
    }else{
      var image = new moxie.image.Image();
      image.onload = function() {
        image.downsize( 150, 150 );//先压缩一下要预览的图片,宽300,高300
        var imgsrc = image.type=='image/jpeg' ? image.getAsDataURL('image/jpeg',80) : image.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
        callback && callback(imgsrc); //callback传入的参数为预览图片的url
        image.destroy();
        image = null;
      };
      image.load( file.getSource() );
    }
  }
  uploader.init();
  //移除图片
  $("#file-list").on('click',".close",function(){
    var img_id = $(this).attr("img_id");
    var img = $("#images_upload");
    var items=img.val().split(",");
    var index = items.indexOf(img_id);
    items.splice(index,1);//删除元素
    img.val(items.join(','));
    $(this).parent().remove();
  });
</script>
</body>
</html>

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

如果想研究插件源码的朋友,可以看这个文件,其中大部分都已经注释了。

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

最终效果就是这样了。

 

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

如果对tp5不太熟悉的朋友,建议直接配置虚拟域名,将项目目录绑定到/tp5/public/目录。

案例源码:https://github.com/BlueSimle/thinkphp5-plupload  (如果对你有帮助,请给个star哦。如果有什么疑问,请留言)

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
PHP编程中八种常见的文件操作方式
Nov 19 PHP
用php实现选择排序的解决方法
May 04 PHP
解析php php_openssl.dll的作用
Jul 01 PHP
php中如何防止表单的重复提交
Aug 02 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
Aug 05 PHP
php保存信息到当前Session的方法
Mar 16 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
Jun 30 PHP
总结PHP删除字符串最后一个字符的三种方法
Aug 30 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
Apr 18 PHP
thinkphp框架page类与bootstrap分页(美化)
Jun 25 PHP
PhpSpreadsheet设置单元格常用操作汇总
Nov 13 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
Feb 26 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
May 08 #PHP
php封装的pdo数据库操作工具类与用法示例
May 08 #PHP
Laravel框架查询构造器简单示例
May 08 #PHP
Laravel Validator 实现两个或多个字段联合索引唯一
May 08 #PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
May 08 #PHP
Laravel框架模型的创建及模型对数据操作示例
May 07 #PHP
Laravel框架路由管理简单示例
May 07 #PHP
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
详解vue路由
2020/08/05 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python语法快速入门指南
2015/10/12 Python
Python max内置函数详细介绍
2016/11/17 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python实现ip代理池功能示例
2019/07/05 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
windows下python安装pip方法详解
2020/02/10 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
新学期班主任寄语
2014/01/18 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014年班级工作总结
2014/11/14 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
广播体操比赛主持词
2015/06/29 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书