--
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layui.css"/>
</head>
<body>
<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>
</body>
<script src="js/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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});
}
}
});
});
</script>
</html>