批量上传文件 input files 预览图 文件列表

批量上传 input files 预览图 文件列表
可在预览列表中 选择删除不需要上传的文件 比较人性化
<style>
.pre-item:hover::after {  content: '点击删除'; padding: 10px 0px;border-radius: 5px;z-index: 1;position: absolute; top: 50%; left: 50%; cursor: pointer;
width: 80%;text-align: center;  background-color: rgba(0, 0, 0, .7);  color: #f00; transform: translate(-50%, -50%);}
 </style>
<input type="file" id="upload" multiple="multiple" class="hidden">
<div class="input-group">
  <input type="text" class="form-control" placeholder="multiple images upload" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2" onclick="upload.click()">选择文件</span>
</div>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">缩略图</div>
  <div class="panel-body">
通过缩略图组件扩展 Bootstrap 的 栅格系统 可以很容易地展示栅格样式的图像、视频、文本等内容。<br />
如果你想实现个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话 你需要使用个第三方插件 如 Masonry、Isotope 或 Salvattore。
  </div>
</div>
<hr>
<div id="file-list-dom" class="row"></div>
<script>
let upload = document.querySelector('#upload'),
fileListDom = document.querySelector('#file-list-dom'),
fileList = {},
formData = new FormData();
upload.addEventListener('change', function() {
    for (let i = this.files.length - 1; i >= 0; i--) {
        let file = this.files[i],
            key = file.name,
            fileItem = {'file': file,'cover': ''}
        if (/(image/)/.test(file.type)) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                fileItem.cover = this.result;
                fileList[key] = fileItem;
                formData.append(key, file);
                showFile(key, true);
            }
        } else {
            fileList[key] = fileItem;
            formData.append(key, file);
            showFile(key, false);
        }
    }
});
fileListDom.addEventListener('click', function(e) {
    let target = e.target || e.srcElement;
    if (target.classList.contains('pre-item')) {
        delFile(target.getAttribute('key'));
    }
});

function showFile(key, isImg) {
    let file = document.querySelector(`[key="${key}"]`);
    if (file === null) {
        if (isImg) {
            fileListDom.innerHTML += '<div key="' + key + '" class="col-xs-6 col-md-3 pre-item"><a href="#" class="thumbnail"><img src="' + fileList[key].cover + '"/></a></div>';
        } else {
            fileListDom.innerHTML += '<div key="' + key + '" class="col-xs-6 col-md-3 pre-item"><a href="#" class="thumbnail">' + key + '</a></div>';
        }
    } else {
        file.style.display = 'block';
    }
}
function delFile(key) {
    let file = document.querySelector(`[key="${key}"]`);
    if (file !== null) {
        delete fileList[key];
        formData.delete(key);
        file.style.display = 'none';
    }
}
</script>