thinkphp5 框架結(jié)合plupload實(shí)現(xiàn)圖片批量上傳功能示例

?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);
 }
 
}
 
?>

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 //不允許選取重復(fù)文件
   },
 
   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');
      // 解析返回的數(shù)據(jù)
      var result = JSON.parse(info.response);
      var img_list = "";
      if(result.errno == 0) {
       // 返回的圖片上傳結(jié)果
       var file_name = result.data; 
       if(multi_selection) {
        // 多圖片上傳不考慮視頻
        if (is_image > -1) {
         // 存入臨時數(shù)組
         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();
    // 刪除當(dāng)前的父級li
    elDel.parent().remove();
    // 重新賦值數(shù)組
    var new_image_files = new Array();
    if (image_files != '') {
     new_image_files = image_files;
    } else {
     new_image_files = $.parseJSON(file_name);
    }
    // 去掉數(shù)組中的當(dāng)前值
    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', '.delete-image', function(){
    // 顯示值為空
    var file_name = inputField.val();
    el.find('.image-list').html('');
    inputField.val('');
    $.ajax({
     type: "POST",
     url: "/backend/del_upload",
     data: "filename=" + file_name,
     success: function(msg) {
       console.log(msg)
     }
    });
   });
  }
 })
})