layui实现多图上传，支持拖拽上传
LayUI
2025-01-26 16:48
99
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css" media="all">
<title></title>
</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>
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.8.0/layui.js"></script>
<script>
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>
</body>
</html>
