本文例項講述了thinkphp5 框架結合plupload實現圖片批量上傳功能。分享給大家供大家參考，具體如下：

在extend目錄下新增目錄uploader，並新建類Uploads

<?php
namespace uploader;
 
class Uploads {
 public static function upfile($file,$path = 'images',$add_domain = false) {
  $res = ['errno' => 1,'errmsg' => '上傳圖片錯誤'];
  $data = '';
  if(!empty($file)) {
   // 上傳根目錄
   $file_path = 'uploads/';
   // 如果傳了路徑過來，則加入路徑
   if(!empty($path)) {
    $file_path .= $path .'/';
   }
   if (!file_exists($file_path)) {
    @mkdir($file_path);
   }
   // 上傳
   $info = $file->move($file_path);
   // 獲取字尾
   $ext = strtolower($info->getExtension());
   //判斷後綴是否合法
   $exts = ['jpg','png','gif','jpeg','mp4','avi','3gp'];
   if(in_array($ext,$exts)) {
    $save_name = $info->getSaveName();
    $save_path = "/" . $file_path . $save_name;
    if($add_domain) {
     $save_path = "http://www.localhost.com/" . $file_path . $save_name;
    } 
    $res = ['errno' => 0,'data' => $save_path];
   } else {
    $res = ['errno' => 1,'errmsg' => $ext];
   }
  } else {
   $res = ['errno' => 1,'errmsg' => '請選擇圖片！'];
  }
  
  return $res;
 }
}
?>

使用

<?php
 
namespace app\backend\controller;
 
use think\Controller;
use think\Request;
use uploader\Uploads;
 
class Upload extends Controller
{
 public function upload(Request $request) {
  $files = $request->file("file");
  $updir = $request->post('updir');
  $res = Uploads::upfile($files,$updir);
  return json_encode($res);
 }
 
 public function del_upload(Request $request) {
  $res = ['errno' => 1,'errmsg' => '刪除失敗'];
  $filename = $request->post('filename');
  if(!empty($filename)) {
   @unlink($_SERVER['DOCUMENT_ROOT'] . $filename);
   $res = ['errno' => 0,'errmsg' => $filename];
  }
  return json_encode($res);
 }
 
}
 
?>

前端js

var image_files = new Array(); // 多圖片上傳臨時儲存
$(document).ready(function() {
 $('.media-picker').each(function() {
  var el = $(this);
  var elbtn = el.find('.media-picker-button');
  var multi_selection = false;
  var inputField = el.find('input[type=hidden]');
  // 是否多檔案上傳
  if(elbtn.attr('data-multiple') == 'multiple') {
   multi_selection = true;
  }
  // 上傳目錄
  var upload_path = inputField.attr('upload-path');
  var uploader = new plupload.Uploader({
   runtimes : 'html5,flash,silverlight,html4',browse_button : elbtn.attr('data-id') + '_uploader',multi_selection: multi_selection,auto_start: true,flash_swf_url : '../plugins/plupload/js/Moxie.swf',silverlight_xap_url : '../plugins/plupload/js/Moxie.xap',url : '/backend/upload',filters: {
    mime_types : [ //只允許上傳圖片和zip,rar檔案
    { title : "Image files",extensions : "jpg,jpeg,gif,png,bmp" },{ title : "Video files",extensions : "mp4,3gp" }
    ],max_file_size : '10mb',//最大隻能上傳10mb的檔案
    prevent_duplicates : false //不允許選取重複檔案
   },init: { 
    PostInit: function() {},BeforeUpload: function(up,file) {
     up.setOption('multipart_params',{'updir': upload_path})
    },FilesAdded: function(up) {
     up.start(); //選擇完後直接上傳
    },FileUploaded: function(up,file,info) {
     if (info.status == 200)
     {
      var file_type = file.type;
      var is_image = file_type.indexOf('image');
      var is_video = file_type.indexOf('video');
      // 解析返回的資料
      var result = JSON.parse(info.response);
      var img_list = "";
      if(result.errno == 0) {
       // 返回的圖片上傳結果
       var file_name = result.data; 
       if(multi_selection) {
        // 多圖片上傳不考慮視訊
        if (is_image > -1) {
         // 存入臨時陣列
         image_files.push(file_name);
         inputField.val(JSON.stringify(image_files));
         for (var i = 0; i < image_files.length; i++) {
          img_list += "<li><img src='"+image_files[i]+"' /><span class='delete-image'>✖</span><p>"+image_files[i]+"</p></li>";
         }
        }
       } else {
        inputField.val(file_name);
        if (is_image > -1) {
         img_list = "<li><img src='"+result.data+"' /><span class='delete-image'>✖</span><p>"+result.data+"</p></li>";
        }
        if (is_video > -1) { 
         img_list = "<li><video controls src='"+result.data+"'></video><span class='delete-image'>✖</span><p>"+result.data+"<p></li>";
        }
       }
       el.find('.image-list').html(img_list);
      } else {
       alert(result.errmsg);
      }
     }
     else
     {
      alter(info.response);
     } 
    },Error: function(up,err) {
     alert(err.response);
    }
   }
  })
  uploader.init();
 
 
  // 刪除
  if (multi_selection) {
   el.on('click','.delete-image',function() {
    var file_name = inputField.val();
    var elDel = $(this);
    // 得到filename
    var current_file_name = elDel.next('p').html();
    // 刪除當前的父級li
    elDel.parent().remove();
    // 重新賦值陣列
    var new_image_files = new Array();
    if (image_files != '') {
     new_image_files = image_files;
    } else {
     new_image_files = $.parseJSON(file_name);
    }
    // 去掉陣列中的當前值
    for(var i in new_image_files) {
     if(new_image_files[i] == current_file_name) {
      new_image_files.splice(i,1);
      break;
     }
    }
    $.ajax({
      type: "POST",url: "/backend/del_upload",data: "filename=" + current_file_name,success: function(msg) {
        console.log(msg)
      }
    });
    inputField.val(JSON.stringify(new_image_files));
   });
  } else {
   el.on('click',function(){
    // 顯示值為空
    var file_name = inputField.val();
    el.find('.image-list').html('');
    inputField.val('');
    $.ajax({
     type: "POST",data: "filename=" + file_name,success: function(msg) {
       console.log(msg)
     }
    });
   });
  }
 })
})

更多關於thinkPHP相關內容感興趣的讀者可檢視本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結》、《ThinkPHP常用方法總結》、《codeigniter入門教程》、《CI(CodeIgniter)框架進階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術總結》。

希望本文所述對大家基於ThinkPHP框架的PHP程式設計有所幫助。