最近在开发社区超市项目的过程中，因为产品部分缩略图是多图片上传模式，在研究了TP官方文档的多图上传后在用户体验上没有达到理想的效果，后来通过查询相关资料，然后结合plupload组件解决！在此记一下！效果如下图：
下面我把基本流程走一下！
1、下载pupload组件，解压放入TP 相关目录
链接: https://pan.baidu.com/s/1gd77FwW1ohCHavJqC9Yjew 提取码: 739v 复制这段内容后打开百度网盘手机App，操作更方便哦
2、在view表单页面要引入JS组件
<script type="text/javascript" src="__ADDON__/plupload/moxie.js"></script>
<script type="text/javascript" src="__ADDON__/plupload/plupload.dev.js"></script>
表单引入部分如下：
<div class="container-fluid" id="container">
<form class="form-horizontal" name="form" method="post" action="{$addons_url}/product/add_save">
<div class="form-group">
<label for="inputEmail3" class="col-sm-1 control-label">商品图片</label>
<div class="col-sm-11">
<div class="mui-input-cell">
<input type="hidden" name="pic" class="form-control" id="images_pic" placeholder="" autocomplete="off" >
<button class="btn btn-primary" type="button" id="thum_files" style="height: 30px;line-height: 8px;">选择图片</button>
<button class="btn btn-primary" type="button" id="upload_files" style="display: none">开始上传</button>
<ul id="file_pix_list"></ul>
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword4" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<button type="submit" class="btn btn-success waves-effect waves-light m-r-10">立即保存</button>
</div>
</div>
</form>
</div>
<script>
let uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'thum_files',
container: document.getElementById('container'),
url : "{$addons_url}/Shop/upfile",//AJAX地址
flash_swf_url : "__ADDON__/mobile/plupload/Moxie.swf",
silverlight_xap_url : "__ADDON__/mobile/plupload//Moxie.xap",
multi_selection: true,
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
]
},
init: {
PostInit: function() {
document.getElementById('upload_files').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
let len = files.length;
for(let i = 0; i<len; i++){
let file_name = files[i].name;
let file_size = files[i].size;
let html = '<li id="file-' + files[i].id +'"><span class="close"></span></li>';
$(html).appendTo('#file_pix_list');
!function(i){
previewImage(files[i],function(imgsrc){
$('#file-'+files[i].id).append('<a><img src="'+ imgsrc +'" /><span class="progress"></span></a>');
})
}(i);
$("#upload_files").trigger('click');
}
},
UploadProgress: function(up, file) { },
FileUploaded : function (up,file,res) {
let data = JSON.parse(res.response).data;
$('#file-'+file.id).children('.close').attr('img_name',data.img_url);
let img = $("#images_pic");
let str = img.val();
if(str == ''){
str = data.img_url;
}else{
str += ','+data.img_url;
}
img.val(str);
},
Error: function(up, err) {
console.log(err.code + "--"+err.message);
}
}
});
function previewImage(file,callback){
if(!file || !/image\//.test(file.type)) return;
if(file.type=='image/gif'){
var gif = new moxie.file.FileReader();
gif.onload = function(){
callback(gif.result);
gif.destroy();
gif = null;
};
gif.readAsDataURL(file.getSource());
}else{
let image = new moxie.image.Image();
image.onload = function() {
image.downsize( 150, 150 );
let imgsrc = image.type=='image/jpeg' ? image.getAsDataURL('image/jpeg',80) : image.getAsDataURL();
callback && callback(imgsrc);
image.destroy();
image = null;
};
image.load( file.getSource() );
}
}
uploader.init();
$("#file_pix_list").on('click',".close",function(){
/*
该部分删除为隐藏域中图片路径，尽可能在此ajax响应后台把图片文件删除
*/
var img_name = $(this).attr("img_name");
let img = $("#images_pic");
let items=img.val().split(",");
let r index = items.indexOf(img_name);
items.splice(index,1);//删除元素
img.val(items.join(','));
$(this).parent().remove();
});
function image2Base64(img) { //将图片转换为Base64
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL("image/png");
return dataURL;
}
</script>
<style>
ul {list-style-type:none;}
#file_pix_list {overflow:hidden;padding-left:initial;margin-top:10px;}
#file_pix_list li {width:160px;float:left;height:200px;position:relative;height:inherit;margin-bottom:inherit;}
#file_pix_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("__ADDON__/mobile/plupload/close.png");width:20px;height:20px;background-size:contain;position:absolute;right:5%;top:5px;}
#file_pix_list li a img {max-width:100%;max-height:100%;}
.progress {position:absolute;background-color:rgba(4,4,4,0);color:#fff;padding:3px 3px 3px 3px;border-radius:10%;}
</style>
3、控制器处理部分 - 模板中ajax指向的地址部分
public function upfile(){
$images = $this->request->file('file');
$imgPath = 'public' . DS . 'uploads'; //保存路径
$info = $images->move(ROOT_PATH . $imgPath);
$path = '/uploads/'.date('Ymd',time()).'/'.$info->getFilename(); //返回路径
return json(['status'=>'success','data'=>['img_url'=>$path]]);
}
搞定，收！
