<div class="layui-upload">
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-row" id="demo2"></div>
</blockquote>
</div>
<script>
//<![CDATA[
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery
, upload = layui.upload
, element = layui.element
, layer = layui.layer;
let imgIndex = -1;
//预读本地文件示例,不支持ie8
const data = [];
//多图片上传
var uploadListIns = upload.render({
elem: '#test2'
, url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
, elemList: $('#demo2') //列表元素对象
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
const that = this;
//将每次选择的文件追加到文件队列
const files = this.files = obj.pushFile();
const photos = {
'title': '预览图',
'id': 222,
}
obj.preview(function (index, file, result) {
imgIndex = imgIndex + 1
data.push({'src': result, 'alt': file.name})
photos.data = data;
//'<img class="layui-upload-img" id="demo1" src="' + result + '"/>' +
const html = $([
'<div class="img-c layui-col-xs3" style="margin-top:15px">' +
'<img class="layui-upload-img" layer-src="' + result + '" src="' + result + '" />' +
'<div class="layui-row">' +
'<div class="layui-progress" lay-showpercent="yes" style="width: 100px;margin-top:5px" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>' +
'</div>' +
'<div class="layui-row" id ="operation-' + index + '">' +
'<a href="#" class="img-del layui-btn layui-btn-sm layui-btn-danger" style="margin-top:5px">删除</a>' +
'<a href="#" index = "' + (imgIndex) + '" class="img-show layui-btn layui-btn-sm layui-btn-normal" style="margin-top:5px">查看</a>' +
'</div>' +
'</div>'].join(''));
//单个查看
html.find('.img-show').on('click', function () {
debugger;
photos.start = $(this).attr("index")
layer.photos({
photos: photos
, closeBtn: 1
, anim: 5
});
});
//删除
html.find('.img-del').on('click', function () {
delete files[index]; //删除对应的文件
html.remove();
//清空 input file 值,以免删除后出现同名文件不可选
//uploadListIns.config.elem.next()[0].value = '';
});
that.elemList.append(html);
//$('#demo2').append( html)
element.render('progress'); //渲染新加的进度条组件
});
}, before: function (obj) {
element.progress('progress-demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
, done: function(res, index, upload){
var div = this.elemList.find('div#operation-'+ index)
div.remove();
delete this.files[index]; //删除文件队列已经上传成功的文件
},
allDone: function(obj){
obj = null;
layer.msg("上传完成");
},
error: function (index, upload) {
}
//进度条
, progress: function (n, elem, e, index) {
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
})
//]]>
</script>
layui文件上传支持预览大图,
猜你喜欢
转载自blog.csdn.net/guzhizang/article/details/129932209
今日推荐
周排行