layui多文件上传-删除文件
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>
<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:这里因人而异，这只是我的处理方式
- 给
设置点击监听（利用事件委托原理）
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() // 页面文件标签也删除}})
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！