做了很多地方的调整才最终达到我自己的预期，真teme累一晚上。
Html
<div class="layui-upload" id="uploadimgbox" style="">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="upload-img-list">
</div>
</blockquote>
<input type="text" id="uploadImgIds">
<div id="ts"></div>
<div class="mark_button">
<button type="button" class="layui-btn layui-btn-normal" id="sele_imgs">选择文件</button>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/index/layer/layer.js"></script>
<script src="/static/index/layui/layui.js"></script>
<script type="text/javascript" src="/static/index/layui/layui.all.js"></script>
<script id="img_template" type="text/html">
<div style="display: inline-block; margin-right: 10px;">
<div class="ant-upload-select ant-upload-select-picture-card">
<p id="Ids{{ d.imgId }}" style="display: none">{{ d.imgId }}</p>
<span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
<img src="{{ d.filePath }}" width="100%" style="">
<button type="button" class="ant-btn ant-btn-circle close ant-btn-sm" id="delete_img"><i class="layui-icon layui-icon-close ant-anticon-close"></i></button>
</div>
</div>
</script>
javaScript
layui.use(['upload', 'laytpl', 'form'], function () {
var $ = layui.jquery
, upload = layui.upload
, laytpl = layui.laytpl
, form = layui.form;
var imgCount = 0
, count = -1
, i = 0
, imgIds = '';
//多图片上传
var uploadListIns = upload.render({
elem: '#sele_imgs' //开始
, accept: 'images' /* 只能穿图片 */
, acceptMime: 'image/*' /* 打开文件选择器时 只显示图片*/
, url: '/index/images/imgUpload/'
, auto: true /* 是否选完图片自动上传*/
, multiple: true /* 是否允许多文件上传 true是 false否*/
, number: 3 /* 设置能上传几个文件*/
, size: 1024 * 3 /* 设置上传单一文件最大尺寸*/
, choose: function (obj) { //选择图片后事件
//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
obj.preview(function(index, file, result){
count++;
});
}
, before: function (obj) { //上传前回函数
layer.load(); //上传loading
console.log(obj);
}
,allDone: function(obj){
upload.render();
/* 点击删除事件 */
$('#upload-img-list div:last-child>button').click(function () {
$(this).parent().parent("div").remove();
var tIds = $(this).siblings("p").html();
var Ids = $("#uploadImgIds").val();
Ids = Ids.split(',');
temp = $.grep(Ids, function (val, key) {
if (val.indexOf(tIds) != -1)
return true;
}, true);
$("#uploadImgIds").val(temp.join(","));
imgIds = imgIds.split(',');
imgIds = $.grep(imgIds, function (val, key) {
if (val.indexOf(tIds) != -1)
return true;
}, true);
imgIds = imgIds.join(",");
return false;
});
}
, done: function (res,index,upload) {
var data = {
filePath: res.filePath,
name: res.name,
imgId: res.imgId,
status: res.status,
};
//将上传完毕图片html进去
laytpl(img_template.innerHTML).render(data, function (html) {
$('#upload-img-list').append(html);
});
imgIds = imgIds == '' ? res.imgId : imgIds + "," + res.imgId;
if (i == count) {
imgCount = count;
$("#uploadImgIds").val(imgIds);
layer.closeAll('loading');
layer.msg('上传成功！');
}
i++;
console.log(i);
}
, error: function (index, upload) {
layer.closeAll('loading'); //关闭loading
top.layer.msg("上传失败！");
}
});
});
Css
<style>
.ant-upload-select{
display: inline-block;
}
.ant-upload-select-picture-card{
border: 1px dashed #d9d9d9;
width: 104px;
height: 104px;
border-radius: 4px;
background-color: #fafafa;
text-align: center;
cursor: pointer;
-webkit-transition: border-color .3s ease;
-o-transition: border-color .3s ease;
transition: border-color .3s ease;
vertical-align: top;
margin-right: 8px;
margin-bottom: 8px;
display: table;
}
.ant-upload-select-picture-card:hover{
border-color:#ff7e39;
}
.ant-btn{
line-height: 1.5;
display: inline-block;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
height: 32px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
-o-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
position: relative;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.015);
box-shadow: 0 2px 0 rgba(0,0,0,.015);
color: rgba(0,0,0,.65);
background-color: #fff;
border-color: #d9d9d9;
}
.ant-btn-circle{
width: 24px;
height: 24px;
padding: 0;
font-size: 15px;
border-radius: 50%;
}
.ant-upload-select-picture-card {
position: relative;
margin-right: 10px;
margin-bottom: 10px;
}
.ant-upload-select-picture-card .close {
position: absolute;
top: -12px;
right: -12px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.ant-upload-select-picture-card .close .ant-anticon-close{
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
font-weight: 600;
color: #d9d9d9;
}
.ant-upload-select-picture-card:hover .close {
opacity: 1;
}
.ant-upload-select-picture-card:hover .close:hover {
border-color:#ff7e39;
}
.ant-upload-select-picture-card:hover .close:hover .ant-anticon-close{
color: #ff7e39;
}
</style>
网友评论