使用方法：
<!-- 引入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', //选择图片按钮id
container: 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来更新UI
var 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" οndragstart="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的介绍和说明请看：https://github.com/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和png
var 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，高300
var imgsrc = file.type == 'image/jpeg' ? image.getAsDataURL('image/jpeg', 80) : image.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
callback && callback(imgsrc); //callback传入的参数为预览图片的url
image.destroy();
image = null;
};
image.load(file.getSource());
}
}
</script>
————————————————
版权声明：本文为CSDN博主「Stonelalala」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39930129/java/article/details/88949389界面：
添加前端显示的为上传按钮
<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>
————————————————
版权声明：本文为CSDN博主「Stonelalala」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39930129/java/article/details/88949389
