示例：支持多图上传，支持拖拽上传，下方有文件上传信息提示
html代码：
<div class="layui-upload"> <div class="layui-upload-drag" id="test2"> <i class="layui-icon">i> <p>点击多图上传，或将文件拖拽到此处p> div> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图： <div class="layui-upload-list" id="demo2">div> blockquote> <p id="tipTxt">p> div>
JS代码：
layui.use(['element', 'layer','form','upload'], function(){
var $ = layui.jquery
,layer = layui.layer
,element = layui.element
,upload = layui.upload
,form = layui.from;
//多图片上传
upload.render({
elem: '#test2'
,url: 'xxx.xxx' //改成您自己的上传接口
,multiple: true
,accept:'images'
,exts:'jpg|jpeg|png|gjf|webp|bmp|tif'
,drag:true
,allDone: function(obj){
var txt = "共选择了 【"+obj.total+"】 张图片，其中，上传成功 【"+obj.successful+"】 张，失败 【"+obj.aborted+"】 张";
$("#tipTxt").html(txt);
}
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('')
});
}
,done: function(res){
$('#demoText').html('');
//上传完毕
if (res.code == 200) {
layer.msg('上传完毕', {icon: 1});
}
}
});
});
后端接口就是上传图片的接口
Original: https://www.cnblogs.com/zxf100/p/14704544.html
Author: 下页、再停留
Title: layui实现多图上传，支持拖拽上传
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/583378/
转载文章受原作者版权保护。转载请注明原作者出处！