Thinkphp5+plupload實(shí)現(xiàn)的圖片上傳功能示例【支持實(shí)時(shí)預(yù)覽】

更新時(shí)間：2019年05月08日 12:06:11 作者：Yxh_blogs

這篇文章主要介紹了Thinkphp5+plupload實(shí)現(xiàn)的圖片上傳功能,結(jié)合具體實(shí)例形式分析了thinkPHP5結(jié)合plupload實(shí)現(xiàn)可支持實(shí)時(shí)預(yù)覽的圖片上傳功能相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Thinkphp5+plupload實(shí)現(xiàn)支持實(shí)時(shí)預(yù)覽的圖片上傳功能。分享給大家供大家參考，具體如下：

今天和大家分享一個(gè)國(guó)外的圖片上傳插件，這個(gè)插件支持分片上傳大文件。其中著名的七牛云平臺(tái)的jssdk就使用了puupload插件，可見(jiàn)這個(gè)插件還是相當(dāng)牛叉的。

這個(gè)插件不僅僅支持圖片上傳，還支持大多數(shù)文件的上傳，例如視頻文件，音頻文件，word文件等等，而且大文件都采用分片上傳的機(jī)制。

Plupload有以下功能和特點(diǎn)：

1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統(tǒng)的<input type=”file” />。Plupload會(huì)自動(dòng)偵測(cè)當(dāng)前的環(huán)境，選擇最合適的上傳方式，并且會(huì)優(yōu)先使用HTML5的方式。所以你完全不用去操心當(dāng)前的瀏覽器支持哪些上傳方式，Plupload會(huì)自動(dòng)為你選擇最合適的方式。

2、支持以拖拽的方式來(lái)選取要上傳的文件

3、支持在前端壓縮圖片，即在圖片文件還未上傳之前就對(duì)它進(jìn)行壓縮

4、可以直接讀取原生的文件數(shù)據(jù)，這樣的好處就是例如可以在圖片文件還未上傳之前就能把它顯示在頁(yè)面上預(yù)覽

5、支持把大文件切割成小片進(jìn)行上傳，因?yàn)橛行g覽器對(duì)很大的文件比如幾G的一些文件無(wú)法上傳。

下面就介紹一個(gè)tp5整合plupload圖片上傳插件的小案例，希望給大家?guī)?lái)一點(diǎn)小幫助。

一、案例目錄結(jié)構(gòu)

二、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()){
      //接收參數(shù)
      $images = $this->request->file('file');
      //計(jì)算md5和sha1散列值，TODO::作用避免文件重復(fù)上傳
      $md5 = $images->hash('md5');
      $sha1= $images->hash('sha1');
      //判斷圖片文件是否已經(jīng)上傳
      $img = Db::name('picture')->where(['md5'=>$md5,'sha1'=>$sha1])->find();//我這里是將圖片存入數(shù)據(jù)庫(kù)，防止重復(fù)上傳
      if(!empty($img)){
        return json(['status'=>1,'msg'=>'上傳成功','data'=>['img_id'=>$img['id'],'img_url'=>$this->request->root(true).'/'.$img['path']]]);
      }else{
        // 移動(dòng)到框架應(yīng)用根目錄/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'=>'寫入數(shù)據(jù)庫(kù)失敗']);
        }
      }
    }else{
      return ['status'=>0,'msg'=>'非法請(qǐng)求!'];
    }
  }
}

三、index.html頁(yè)面

<!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">開(kāi)始上傳</button>
  <ul id="file-list">
  </ul>
</div>
<script type="text/javascript">
  //調(diào)用例子
  var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',//上傳方式順序優(yōu)先級(jí)
    browse_button : 'pickfiles',//選擇圖片按鈕id
    container: document.getElementById('container'),//容器
    url : "{:url('Index/upload_images')}",//服務(wù)器接口地址
    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事件發(fā)生后觸發(fā)
      PostInit: function() {
        //document.getElementById('filelist').innerHTML = '';
        document.getElementById('uploadfiles').onclick = function() {
          uploader.start();
          return false;
        };
      },
      FilesAdded: function(up, files) {//文件選擇之后的觸發(fā)的方法
        var len = len = files.length;
        for(var i = 0; i<len; i++){
          var file_name = files[i].name; //文件名
          var file_size = files[i].size;//文件大小
          //構(gòu)造html來(lái)更新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) {//上傳過(guò)程中調(diào)用的方法
        //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對(duì)象
  //有關(guān)mOxie的介紹和說(shuō)明請(qǐng)看：https://github.com/moxiecode/moxie/wiki/API
  //file為plupload事件監(jiān)聽(tīng)函數(shù)參數(shù)中的file對(duì)象,callback為預(yù)覽圖片準(zhǔn)備完成的回調(diào)函數(shù)
  function previewImage(file,callback){
    if(!file || !/image\//.test(file.type)) return; //確保文件是圖片
    if(file.type=='image/gif'){ //gif使用FileReader進(jìn)行預(yù)覽,因?yàn)閙Oxie.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 );//先壓縮一下要預(yù)覽的圖片,寬300，高300
        var imgsrc = image.type=='image/jpeg' ? image.getAsDataURL('image/jpeg',80) : image.getAsDataURL(); //得到圖片src,實(shí)質(zhì)為一個(gè)base64編碼的數(shù)據(jù)
        callback && callback(imgsrc); //callback傳入的參數(shù)為預(yù)覽圖片的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>