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);
        }
        // 去掉数组中的当前值
        new_image_files.pop(current_file_name);
        $.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)
          }
        });
      });
    }
  })
})