Thinkphp5+plupload图⽚上传功能，⽀持实时预览图⽚。
今天和⼤家分享⼀个国外的图⽚上传插件，这个插件⽀持分⽚上传⼤⽂件。
其中著名的七⽜云平台的jssdk就使⽤了puupload插件，可见这个插件还是相当⽜叉的。
这个插件不仅仅⽀持图⽚上传，还⽀持⼤多数⽂件的上传，例如视频⽂件，⾳频⽂件，word⽂件等等，⽽且⼤⽂件都采⽤分⽚上传的机制。
Plupload有以下功能和特点：1、拥有多种上传⽅式：HTML5、flash、silverlight以及传统的<input type=”file” />。
Plupload会⾃动侦测当前的环境，选择最合适的上传⽅式，并且会优先使⽤HTML5的⽅式。
所以你完全不⽤去操⼼当前的浏览器⽀持哪些上传⽅式，Plupload会⾃动为你选择最合适的⽅式。
2、⽀持以拖拽的⽅式来选取要上传的⽂件3、⽀持在前端压缩图⽚，即在图⽚⽂件还未上传之前就对它进⾏压缩4、可以直接读取原⽣的⽂件数据，这样的好处就是例如可以在图⽚⽂件还未上传之前就能把它显⽰在页⾯上预览5、⽀持把⼤⽂件切割成⼩⽚进⾏上传，因为有些浏览器对很⼤的⽂件⽐如⼏G的⼀些⽂件⽆法上传。
下⾯就介绍⼀个tp5整合plupload图⽚上传插件的⼩案例，希望给⼤家带来⼀点⼩帮助。
⼀、案例⽬录结构⼆、Index.php控制器⽅法<?phpnamespace 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()){//接收参数$images = $this->request->file('file');//计算md5和sha1散列值，TODO::作⽤避免⽂件重复上传$md5 = $images->hash('md5');$sha1= $images->hash('sha1');//判断图⽚⽂件是否已经上传$img = Db::name('picture')->where(['md5'=>$md5,'sha1'=>$sha1])->find();//我这⾥是将图⽚存⼊数据库，防⽌重复上传if(!empty($img)){return json(['status'=>1,'msg'=>'上传成功','data'=>['img_id'=>$img['id'],'img_url'=>$this->request->root(true).'/'.$img['path']]]);}else{// 移动到框架应⽤根⽬录/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'=>'写⼊数据库失败']);}}}else{return ['status'=>0,'msg'=>'⾮法请求!'];}}}三、index.html页⾯<!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">开始上传</button><ul id="file-list"></ul></div><script type="text/javascript">//调⽤例⼦var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',//上传⽅式顺序优先级browse_button : 'pickfiles',//选择图⽚按钮idcontainer: document.getElementById('container'),//容器url : "{:url('Index/upload_images')}",//服务器接⼝地址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事件发⽣后触发PostInit: function() {//document.getElementById('filelist').innerHTML = '';document.getElementById('uploadfiles').onclick = function() {uploader.start();return false;};},FilesAdded: function(up, files) {//⽂件选择之后的触发的⽅法var len = len = files.length;for(var i = 0; i<len; i++){var file_name = files[i].name; //⽂件名var file_size = files[i].size;//⽂件⼤⼩//构造html来更新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 + '">' + + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';});*/},UploadProgress: function(up, file) {//上传过程中调⽤的⽅法//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对象//有关mOxie的介绍和说明请看：https:///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 = image.type=='image/jpeg' ? image.getAsDataURL('image/jpeg',80) : image.getAsDataURL(); //得到图⽚src,实质为⼀个base64编码的数据callback && callback(imgsrc); //callback传⼊的参数为预览图⽚的urlimage.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>如果想研究插件源码的朋友，可以看这个⽂件，其中⼤部分都已经注释了。
