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>

<!--图片列表的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() // 页面文件标签也删除
        }
    })
}