示例:支持多图上传,支持拖拽上传,下方有文件上传信息提示
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+"】 张,失败 <span style='color:red'>【"+obj.aborted+"】 </span>张";
$("#tipTxt").html(txt);
}
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
}
,done: function(res){
$('#demoText').html('');
//上传完毕
if (res.code == 200) {
layer.msg('上传完毕', {icon: 1});
}
}
});
});
后端接口就是上传图片的接口