layui的文件上传功能相对来说做的不是很完善,很多需求可能需要自己去实现,就像常见的文件手动上传时,对于选中的文件进行删除重新选择,这个就需要自己去现实,这里用上传图片做一个简单示例。
HTML代码:
<div class="layui-card">
<div class="layui-card-header">票据照片</div>
<div class="layui-card-body">
<div class="layui-upload">
<button type="button" class="layui-btn" id="imgBtn">选择</button>
<div class="img-list"></div><!--这里是图片列表-->
</div>
</div>
</div>
<!--图片列表的html,选择文件时通过js加载-->
<script type="text/html" id="imgItem">
<div class="item">
<div class="handle" data-idx="">
<i class="layui-icon layui-icon-delete" style="font-size: 20px" data-idx=""></i>
</div>
<img src="">
</div>
</script>
JS代码:
删除功能其实不难实现,choose回调中obj.pushFile()
返回的就是所选文件的对象,通过key-value表示,所以要删除那其实就是把这个对象里面对应的属性值删除即可。实现思路如下:
- 通过全局变量保存files对象
- preview函数中初始化文件列表,将参数index(这个就是files对象里面每个文件的key)绑定到需要点击的标签上。PS:这里因人而异,这只是我的处理方式
- 给
<div class="img-list"></div>
设置点击监听(利用事件委托原理)
var files = {};
setImgitemClick()
upload.render({
elem: '#imgBtn'
,url: '' // 这里url自己填
,auto:false
,multiple: true
,acceptMime:"image/*"
,accept:"images"
,choose: function(obj) {
//将每次选择的文件追加到文件队列
files = obj.pushFile();
//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
obj.preview(function (index, file, result) {
var item = $($('#imgItem').html())
item.find('div').attr('data-idx',index)
item.find('i').attr('data-idx',index)
item.find('img').attr('src',result)
$('.img-list').append(item)
});
}
});
// 点击删除的函数
function setImgitemClick(){
$('.img-list').click(function (e) {
var target = $(e.target)
if(target.hasClass('handle') || target.hasClass('layui-icon')){
var dataIdx = target.attr('data-idx')
delete files[dataIdx]; // 通过获取绑定在标签上的index,删除files对象中对应的key属性即可
target.parents('.item').remove() // 页面文件标签也删除
}
})
}