时间戳

首页 > 解决方案 > 删除输入多个选定的文件名

javascript - 删除输入多个选定的文件名

问题描述

目前我的代码与这里的代码相同：How to display selected file names before uploading multiple files in Struts2?

如何将文件列表转换为数组并在每个文件名旁边添加删除链接并在上传前将其删除？

谢谢。

标签： javascriptjqueryhtmlarraylistfile-upload

解决方案

    <input type="file" id="file" multiple>
    <ul id="list"></ul>  

let file=document.getElementById("file");
let list=document.getElementById("list");


let fileList=[];

file.addEventListener("change",(e)=>{
    Array.prototype.forEach.call(e.target.files,(file)=>{
        fileList.push(file);
    });
    updateList();
});

function updateList(){
    list.innerHTML="";
    fileList.forEach((file)=>{
        let li=document.createElement("li");
        li.innerHTML="<span>"+file.name+"</span><a href='javascript:void(0)' class='remove'>remove</a>";
        list.appendChild(li);
    });
}


list.addEventListener("click",(e)=>{
    let target=e.target;
    if(target.className=="remove"){
        let parent=target.parentNode;
        let fileName=parent.children[0].innerText;
        refreshList(fileName);
    }
});

function refreshList(fileName){
    fileList=fileList.filter((file)=>{
    return  file.name.indexOf(fileName)==-1;
  });
    console.log(fileList);
    updateList();
}

推荐阅读