plupload插件官方地址：plupload官方网站

参数，方法，设置说明文档地址：配置文档

前端

使用方法：

<!-- 引入plupload文件 --><!-- moxie用来生成图片缩略图 --><script src="./plupload/js/moxie.js"></script><script src="./plupload/js/plupload.full.min.js"></script><script>//新建一个plupload对象，并设置相应的参数var uploader_img = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4', //上传方式顺序优先级browse_button: 'addimg', //选择图片按钮idcontainer: document.getElementById('img-box'), //容器url: "/index/user/uploadimg", //服务器接口地址flash_swf_url: "/public/assets/libs/plupload/js/Moxie.swf",silverlight_xap_url: "/public/assets/libs/plupload/js/Moxie.xap",multi_selection: true, //false为单图上传，true为多图上传chunk_size: "3mb",//分片上传，每片的大小filters: {max_file_size: '3000mb', //限制文件上传大小mime_types: [{title: "图片文件",extensions: "jpg,jpeg,png"//上传文件格式限制}, //限制文件上传格式]},init: {//init事件发生后触发PostInit: function () {//document.getElementById('filelist').innerHTML = '';},FilesAdded: function (up, files) { //文件选择之后的触发的方法for (var i = 0; i < files.length; i++) {var file_name = files[i].name; //文件名var file_size = files[i].size;//文件大小//构造html来更新UIvar html = '<div id="' + files[i].id + '" class="layui-col-md1 img-item draggable-element" ></div>';$(html).appendTo('#elements-container');//生成缩略图!function (i) {previewImage(files[i], function (imgsrc) {$('#' + files[i].id).append('<i class="layui-icon layui-icon-close"></i><img draggable="false" ondragstart="return false" src="' + imgsrc + '" /><p class="layui-elip">' + files[i].name + '</p>');})}(i);}//用来拖动图片进行排序$(function() {$('.draggable-element').arrangeable();});},UploadProgress: function (up, file) { //上传过程中调用的方法$('#img-progress').show();var percent = file.percent;element.progress('img', percent + '%');},FileUploaded: function (up, file, res) { //文件上传完成后，up:plupload对象，file:上传的文件相关信息，res:服务器返回的信息var return_msg = $.parseJSON(res.response);var file_info= return_msg.file_path;//添加表单元素var newimg = document.createElement('input');//设定input的属性newimg.type = 'hidden';newimg.name = 'imglist[]';newimg.value = file_info;newimg.class='layui-input';// //获取父元素var pNode = document.getElementById(file.id);pNode.appendChild(newimg);var input=$('#'+file.id).find('input');$(input).attr('name','imglist[]');Sign += 1;if (Sign == Sign_stop) {document.getElementById('form-confirm').click();}},Error: function (up, err) {//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));}}});uploader_img.init();//初始化//plupload中为我们提供了mOxie对象//有关mOxie的介绍和说明请看：/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和pngvar 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，高300var imgsrc = file.type == 'image/jpeg' ? image.getAsDataURL('image/jpeg', 80) : image.getAsDataURL(); //得到图片src,实质为一个base64编码的数据callback && callback(imgsrc); //callback传入的参数为预览图片的urlimage.destroy();image = null;};image.load(file.getSource());}}</script>

界面：

添加前端显示的为上传按钮

<div id="img-box"><!--添加按钮--><a href="javascript:void(0);" class="layui-btn" id="addimg">点击添加</a><!--上传文件信息及删除,拖拽排序--><div class="layui-row"><div id="elements-container"></div></div><!--上传进度条--><div class="layui-progress" id="img-progress" lay-filter="img" lay-showPercent="yes"><div class="layui-progress-bar" lay-percent="0%"></div></div></div>

添加文件之后的plupload对象

开始上传，可以选择添加之后立即上传（FilesAdded事件），也可以手动触发，方法为start();

//上传图片uploader_img.setOption("multipart_params", {'caseName': caseName});//设置上传附带的参数uploader_img.start();

上传的xhr

PHP后台处理

上传类:

<?php/*** Created by PhpStorm.* User: stone* Date: .3.22* Time: 9:39*/namespace app\api\controller;class Upload{/** 流程* 1.移动临时文件到指定目录* 2.判断是否是最后一块，并进行合并* 3.删除临时文件及目录* 4.返回相关信息*/private $file_path='';//上传目录private $temp_path='';//php文件临时目录private $blob_num;//第几片private $total_num;//总片数private $file_name;//文件名private $temp_name;//php上传的临时文件目录/***upload constructor.* @access public* @param string $filePath* @param string|integer $blobNum* @param string|integer $totalNum* @param string $fileName* @param string $tempName**/public function __construct($filePath,$blobNum,$totalNum,$fileName,$tempName){$this->file_path=$filePath;$this->blob_num=$blobNum;$this->total_num=$totalNum;$this->file_name=$fileName;$this->temp_name=$tempName;$this->temp_path=ROOT_PATH.'public/upload/';$this->moveFile();$this->mergeFile();}//移动临时文件private function moveFile(){$this->touchDir();//将php上传的临时文件移动到临时目录$filename=$this->temp_path.$this->file_name.'_'.$this->blob_num;move_uploaded_file($this->temp_name,$filename);}//合并文件private function mergeFile(){//当前分片序号（从0开始）等于总分片数-1if($this->blob_num==($this->total_num-1)){$blob='';//使用fopen//使用file_get(put)_contents//先判断文件是否已经存在if(file_exists($this->file_path.iconv('UTF-8','GB2312',$this->file_name))){@unlink($this->file_path.iconv('UTF-8','GB2312',$this->file_name));}for($i=0;$i<$this->total_num;$i++){$blob=file_get_contents($this->temp_path.$this->file_name.'_'.$i);$last_path=$this->file_path.$this->file_name;iconv('UTF-8','GB2312',$this->file_path.$this->file_name);file_put_contents($last_path,$blob,FILE_APPEND);}$this->deleteTempFile();}}//删除上传的临时文件private function deleteTempFile(){for($i=0;$i<$this->total_num;$i++){@unlink($this->temp_path.$this->file_name.'_'.$i);}}//创建文件架private function touchDir(){//上传目录if(!file_exists($this->file_path)){$oldmask=umask(0);@mkdir($this->file_path,0777,true);umask($oldmask);}//临时文件上传目录if(!file_exists($this->temp_path)){@mkdir($this->temp_path,0777,true);}return;}//API返回数据GBpublic function apiReturn(){if($this->blob_num==($this->total_num-1)){//修改文件权限$oldmask=umask(0);$res=chmod($this->file_path.$this->file_name,0777);umask($oldmask);$res1=$this->file_path.$this->file_name;$res2=file_exists($res1);if($res2){$data['code']=2;$data['msg']='success';$data['file_path']=$this->file_path.$this->file_name;}}else{if(file_exists($this->temp_path.$this->file_name.'_'.$this->blob_num)){$data['code']=1;$data['msg']='waiting for all';$data['file_path']='';}}return $data;}}

调用上传类

public function uploadImg(){if ($_FILES['file']['error'] == 0) {$caseName = trim($this->request->param('caseName'));//获取参数$file_path = ROOT_PATH . '/img/';//设置文件路径$blob_num = $this->request->param('chunk');//当前片数$total_num = $this->request->param('chunks');//总片数$file_name = $this->request->param('name');//文件名称$temp_name = $_FILES['file']['tmp_name'];//零时文件名称$uploadClass = new Upload($file_path, $blob_num, $total_num, $file_name, $temp_name);//实例化upload类，并传入相关参数$data = $uploadClass->apiReturn();return json_encode($data);} else {$data['code'] = 0;$data['msg'] = 'error code:' . $_FILES['file']['error'];$data['file_path'] = '';return json_encode($data);}}

上传成功后返回的信息：

上传成功之后，plupload对象会调用FileUploaded事件

FileUploaded: function (up, file, res) {//文件上传完成后，up:plupload对象，file:上传的文件相关信息，res:服务器返回的信息//进行相关处理}

上传过程中会调用UploadProgress事件

UploadProgress: function (up, file) { //上传过程中调用的方法$('#img-progress').show();var percent = file.percent;element.progress('img', percent + '%');}

该方法可以用来控制进度条。

若有不足之处，敬请见谅！