-
只是好奇：你为什么要这样做？ 为什么你会对用户选择的（一些）文件说“我没有用”？ – 马塞尔·科尔佩尔 评论 2010年7月1日23:12 -
28 这可能更便于用户在上传之前删除文件。 如果你最初选择了20个，然后你决定不想上传第14个，那么你不能只删除那一个，你必须重新开始（这有点痛苦）。 我认为将FileList设置为只读是一个错误的疏忽，除非我没有看到一些安全隐患。 – 拉斐尔 评论 2010年7月11日11:41 -
直接从输入的FileList中删除文件是安全问题，但您可以在关闭文件上传对话框后立即克隆该FileList，然后修改该克隆并在通过ajax发布时使用它 – 亚历克斯_1948511 评论 2020年1月30日13:32
20个答案
这个 HTML输入元素 接口 [HTML5]有一个 只读 文件列表 属性，[…] [强调我的]
document.getElementById（'multifile'）.value=“”； 
从文件列表中删除文件（索引）{ const dt=新数据传输（）； const输入=document.getElementById（'files'）； const{files}=输入； for（设i=0；i<文件长度；i++）{ const文件=文件[i]； if（索引！==i）{ dt.items.add（文件）；// 在这里，您排除了该文件。 从而将其移除。 } } /*将数据传输对象文件分配给“input”变量不会将数据传输文件写入其中，因为它没有对元素的引用：而是写入*/ document.getElementById（'files'）=dt.files；// 分配更新列表 } const input=document.getElementById（“文件”）； //作为一个数组，您可以更自由地使用数组函数转换文件列表。 const fileListArr=Array.from（input.files）； fileListArr.splice（索引，1）；// 这里你删除文件 console.log（fileListArr）； 
-
三 非常感谢您这么做，但是请注意，除非您从列表末尾删除文件，否则在某些情况下不会删除任何内容，因为每个循环上的索引都会重置，所以最好使用此技巧 geeksforeks.org/how-to-get-the-child-node-index-in-javascript – ctf0型 评论 2020年10月22日5:21 -
三 -
2
//fileDialog.files是FileList var fileBuffer=[]； //将文件列表附加到数组 Array.prototype.push.apply（fileBuffer，fileDialog.files）；//<-- 在这里 //现在你可以根据需要操纵结果 //将一项移出数组 var file=fileBuffer.shift（0,1）；//<-- 按预期工作 console.info（文件名+“，”+文件大小+“，“+文件类型）； //按大小排序文件 fileBuffer.sort（函数（a，b）{ 返回a.size>b.size？ 1:a.size<b.size- 1 : 0; }); 
-
13 -
1 @穆罕默德·乌默尔（Muhammad Umer）-谢谢，我同意它更简单，并且被列为备选答案。 然而，这取决于必须支持哪些浏览器，以及它们是否需要pollfill来使用Array.from（）。 请参见： stackoverflow.com/a/36810954/943435 – 瑜伽 评论 2018年2月5日3:51 -
-
@3zzy-可以修改FileList，但只能在现代浏览器中进行。 有关详细信息，请参阅此SO问题： stackoverflow.com/a/47522812/943435 – 瑜伽 评论 2019年1月28日15:38 -
let fileArray=Array.from（fileList）； 
Node.prototype.replaceWith=函数（节点） { this.parentNode.replaceChild（节点，this）； }; if（window.File和window.FileList） { var topicForm=document.getElementById（“yourForm”）； topicForm.fileZone=文档.getElementById（“fileDropZoneElement”）； topicForm.fileZone.files=新阵列（）； topicForm.fileZone.inputWindow=文档.createElement（“输入”）； topicForm.fileZone.inputWindow.setAttribute（“类型”，“文件”）； topicForm.fileZone.inputWindow.setAttribute（“多”，“多”）； topicForm.onsubmit=函数（事件） { var请求=新的XMLHttpRequest（）； if（请求.上传） { event.proventDefault（）； topicForm.ajax.value=“true”； request.upload.onprogress=函数（事件） { var progress=event.loaded.toString（）+“传输的字节数”； if（event.length可计算） progress=数学.round（event.loaded/event.total*100）.toString（）+“%”； topicForm.fileZone.innerHTML=进度.toString（）； }; request.onload=函数（事件） { response=JSON.parse（request.responseText）； //在此处处理响应。 }; request.open（topicForm.method，topicForm.getAttribute（“action”），true）； var data=新FormData（topicForm）； for（var i=0，file；file=topicForm.fileZone.files[i]；i++） data.append（“文件”+i.toString（），文件）； 请求发送（数据）； } }; topicForm.fileZone.firstChild.replaceWith（document.createTextNode（“删除文件或单击此处”））； var handleFiles=函数（文件） { for（var i=0，文件；文件=files[i]；i++） topicForm.fileZone.files.push（文件）； }; topicForm.fileZone.ondrop=函数（事件） { event.stopPropagation（）； event.proventDefault（）； handleFiles（event.dataTransfer.files）； }; topicForm.fileZone.inputWindow.onchange=函数（事件） { handleFiles（topicForm.fileZone.inputWindow.files）； }; topicForm.fileZone.ondragover=函数（事件） { event.stopPropagation（）； event.proventDefault（）； }; topicForm.fileZone.onclick=函数（） { topicForm.fileZone.inputWindow.focus（）； topicForm.fileZone.inputWindow.click（）； }; } 其他的 topicForm.fileZone.firstChild.replaceWith（document.createTextNode（“该更新浏览器了”））； 
var newFileList=数组.from（event.target.files）； newFileList.splice（索引，1）； 
-
22
//一些全局变量 var克隆={}；// 将是我的FileList克隆 var removedkeys=0；// 删除密钥计数器以便稍后处理请求 var NextId=0；// 计数器将条目添加到克隆而不替换现有条目 jQuery（document）.ready（function（）{ jQuery（“#form input”）.change（function（）{ //制作克隆 var curFiles=this.files； //将信息复制到克隆之前的临时对象克隆 var temparr=jQuery.extend（true，｛｝，curFiles）； //删除克隆的不必要的FileList键 删除temparr[“长度”]； 删除temparr[“项目”]； if（Object.keys（clon）.length===0）{ jQuery.extend（true、clon、temparr）； }其他{ var keysArr=对象.keys（克隆）； NextId=数学.max.apply（null，keysArr）+1；// FileList键是数字 if（NextId<curFiles.length）{//我发现了一个错误，必须解决它，因为我没有替换temparr键。。。 NextId=curFiles.length； } for（temparr中的var键）{//我必须重命名新条目，以避免覆盖克隆中的现有键 if（temparr.hasOwnProperty（key））{ temparr[NextId]=temparr[key]； 删除temparr[key]； //米aca los cambios de id en los html标签con el nuevo NextId 下一个Id++； } } jQuery.extend（true、clon、temparr）；// 将新条目复制到克隆 } //修改html文件列表显示 if（NextId===0）{ jQuery（“#filelist”）.html（“”）； for（var i=0；i<curFiles.length；i++）{ var f=当前文件[i]； jQuery（“#filelist”）.append（“<p id=\“file”+i+“\”style=\'margin-bottom:3px！important；\'>“+f.name+”<a style=\“float:right；cursor:pointer；\”onclick=\“BorrarFile（“+i+”）\”>x</a></p>“）；// 函数BorrarFile将按文件id处理从克隆中删除的文件 } }其他{ for（var i=0；i<curFiles.length；i++）{ var f=当前文件[i]； jQuery（“#filelist”）.append（“<p id=\”file“+（i+NextId-curFiles.length）+”\“style=\'margin-bottom:3px！important；\'>”+f.name+“<a style=\”float:right； 光标：指针\ “onclick=\”BorrarFile（“+（i+NextId-curFiles.length）+”）\“>x</a></p>”）；// 是的，i+NextId-curFiles.length实际上是正确的 } } //随时随地更新文件总数 jQuery（“#form p”）.text（Object.keys（clon）.length+“选中的文件”）； }); }); 函数BorrarFile（id）{//处理从克隆中删除文件 jQuery（“#file”+id）.remove（）；// 删除html文件列表元素 删除克隆[id]；// 删除条目 删除的键++；// 添加到删除的密钥计数器 if（Object.keys（clon）.length===0）{ jQuery（“#form p”）.text（Object.keys（clon）.length+“选中的文件”）； jQuery（“#fileToUpload”）.val（“”）；// 提交之前，我必须重置表单检查功能的表单文件输入。 否则，即使我的克隆是空的，它也会发送 }其他{ jQuery（“#form p”）.text（Object.keys（clon）.length+“选中的文件”）； } } //现在我的表单检查功能 功能检查（）{ if（document.getElementById（“fileToUpload”）.files.length==0）{ 警报（“未选择文件”）； 返回false； }其他{ var_validFileExtensions=[“.pdf”，“.pdf”]；// 我想要pdf文件 //检索输入文件 var arrInputs=克隆； //验证文件 for（var i=0；i<Object.keys（arrInputs）.length+removedkeys； i++）{ if（arrInputs[i]的类型！=“undefined”）{ var oInput=arrInputs[i]； if（oInput.type==“application/pdf”）{ var sFileName=oInput.name； 如果（sFileName.length>0）{ var blnValid=假； 对于（var j=0；j<_validFileExtensions.length；j++）{ var sCurExtension=有效文件扩展[j]； if（sFileName.substr（sFile Name.length-sCurExtension.length.sCurExtension.length-length）.toLowerCase（）==sCurExtence.toLoverCase（（））{ blnValid=真； 断裂； } } 如果（！bln有效）{ alert（“对不起，”+sFileName+“无效，允许的扩展名为：”+_validFileExtensions.join（“，”））； 返回false； } } }其他{ alert（“对不起，”+arrInputs[0].name+“无效，允许的扩展名为：”+_validFileExtensions.join（“或”））； 返回false； } } } //继续数据追加和提交 //这里有一些我之前设置的隐藏输入值。 现在检索它们以提交。 我的表格实际上甚至不是表格。。。 var fecha=jQuery（“#fecha”）.val（）； var vendor=jQuery（“#vendor”）.val（）； var sku=jQuery（“#sku”）.val（）； //创建formdata对象 var formData=新formData（）； formData.append（“fecha”，fecha）； formData.append（“vendor”，encodeURI（vendor））； formData.append（“sku”，sku）； //现在附加克隆文件数据（最后！） var fila=克隆；// 我这样做是因为我已经使用“fila”对象编写了以下内容，所以我再次复制了我的克隆 //有趣的部分。 由于克隆对象中的条目不是连续的数字，我无法正常迭代，所以我想到了以下想法 for（i=0；i<Object.keys（fila）.length+removedkeys； i++）{ if（类型为fila[i]！=“未定义”）{ formData.append（“fileToUpload[]”，文件[i]）；// 非常重要的是，文件的formdata键必须是数组。 稍后将检索为$_FILES['fileToUpload']['temp_name'][i] } } jQuery（“#submitbtn”）淡出（“慢”）；// 删除上传的btn，使其无法再次使用 jQuery（“#drag”）.html（“”）；// 清除输出消息元素 //启动请求 var xhttp=新的XMLHttpRequest（）； xhttp.addEventListener（“进度”，函数（e）{ var done=e.position | | e.loaded，total=e.totalSize | | e.total； }，假）； if（xhttp.upload）{ xhttp.upload.onprogress=函数（e）{ var done=e.position | | e.loaded，total=e.totalSize | | e.total； var百分比=完成/总计； jQuery（“#drag”）.html（数学四舍五入（percent*100）+“%”）； }; } xhttp.onreadystatechange=函数（）{ if（this.readyState==4&&this.status==200）{ var respuesta=this.responseText； jQuery（“#drag”）.html（respuesta）； } }; xhttp.open（“POST”，“your_upload_handler.php”，true）； xhttp.send（表单数据）； 返回true； } }; <div id=“form”class=“formpos”> <!-- 选择要上传的pdf：--> <input type=“file”name=“fileToUpload[]”id=“fileToUpload”accept=“application/pdf”multiple> <div><p id=“drag”>将文件放在此处或单击选择它们</p> </div> 上传 //这些输入在formdata上以不同的名称传递。 请注意这一点 //我重复了这一点，所以这就是为什么我对php变量使用单引号 <input type=“hidden”id=“fecha”name=“fecha_copy”value=“'.$fecha.'”/> <input type=“hidden”id=“vendor”name=“vendorname”value=“'.$vendor.'”/> <input type=“hidden”id=“sku”name=“sku“value=”'.$sku.'“”/> </div> 文件列表：</h1> 尚未选择任何内容 .formpos格式{ 宽度：500px； 高度：200px； 边框：4px虚线#999； 边距：30px自动100px； } .表格位置p{ 文本对齐：居中！ 重要； 填充：80px 30px 0px； 颜色：#000； } .formpos目录{ 宽度：100%！ 重要； 身高：100%！ 重要； 文本对齐：居中！ 重要； 边距-底部：30px！ 重要； } .formpos输入{ 位置：绝对！ 重要； 边距：0！ 重要； 填充：0！ 重要； 宽度：500px！ 重要； 高度：200px！ 重要； 大纲：无！ 重要； 不透明度：0！ 重要； } .formpos按钮{ 边距：0； 颜色：#fff； 背景：#16a085； 边界：无； 宽度：508px； 高度：35px； 左边边距：-4px； 边距：4px； 过渡：全部2秒轻松； 大纲：无； } .formpos按钮：悬停{ 背景：#149174； 颜色：#0C5645； } .formpos按钮：激活{ 边框：0； } 
<input class=“rangelog btn border-aero”id=“file_fr”name=“file_xr[]”多类型=“file”占位符=“{$labels_helpfiles_placeholder_file}”> 清空所选文件</span> 函数cleanInputs（fileEle）{ $（fileEle）.val（“”）； var parEle=$（fileEle）.parent（）； var newEle=$（fileEle）.clone（） $（fileEle）.remove（）； $（parEle）.prepend（newEle）； } 
let uploadedFiles=[]； //在DOM文件内选择“onChange”事件 让selected=e.target.files[0]？ e.target.files:[]； uploadedFiles=[…uploadedFile，…selected]； 创建元素（）； 函数createElements（）{ uploadedFiles.forEach（（f，i）=>{ //删除DOM元素并在此处重新创建它们 /*//您可以显示这样的图像： *let reader=new FileReader（）； *reader.onload=函数（e）{ *让url=e.target.result； *//创建<img src=url/> * }; *reader.readAsDataURL（f）； */ element.addEventListener（“点击”，函数（）{ uploadedFiles.splice（i，1）； 创建元素（）； }); } } 设fd=新的FormData（）； uploadedFiles.forEach（（f，i）=>{ fd.append（“文件[]”，f）； }); 获取（“yourEndpoint”，{ 方法：“POST”， 主体：fd， 标题：{ //不设置Content-Type } }).然后（…） <脚本> var图像=[]； 函数image_select（）{ var image=document.getElementById（'image'）.files； 对于（i=0；i<图像长度；i++）{ 图像.push({ “name”：图像[i].name， “url”：url.createObjectURL（图像[i]）， “文件”：图像[i]， }) } document.getElementById（'container'）.innerHTML=image_show（）； } 函数image_show（）{ var image=“”； images.forEach（（i）=>{ image+=`<div class=“image_container d-flex justify-content-center-position-relative”> <img src=“`+i.url+`”alt=“图像”> <span class=“position-absolute”onclick=“delete_image（`+images.indexOf（i）+`）”>×</ span> </div>`； }) 返回图像； } 函数delete_image（e）{ 图像拼接（e，1）； document.getElementById（'container'）.innerHTML=image_show（）； const dt=新数据传输（） const输入=document.getElementById（'image'） const{files}=输入 for（设i=0；i<文件长度；i++）{ const文件=文件[i] 如果（e！==i） dt.items.add（文件）； } input.files=dt.files； console.log（document.getElementById（'image'）.files）； } </script> <body> <div class=“集装箱mt-3 w-100”> <div class=“卡片阴影-sm w-100”> <div class=“card-header d-flex justify-content-between”> 预览多个图像 <form class=“form”action=“{{route（'store'）}}”method=“post”id=“form“enctype=”multipart/form-data“> @csrf公司 <input type=“file”name=“image[]”id=“image”多onchange=“image_select（）”> 提交 </form> </div> <div class=“card-body d-flex flex-wrap justify-content-start”id=“container”> </div> </div> </div> </body> <风格> .image_container（图像容器）{ 高度：120px； 宽度：200px； 边距：6px； 溢出：隐藏； 边距：10px； } .image_container图像{ 高度：100%； 宽度：自动； object-fit：封面； } .image_container范围{ 顶部：-6px； 右：8px； 颜色：红色； 字体大小：28px； font-weight：正常； 光标：指针； } </style> 
函数removeFile（idx:number）{ if（文件）{ let fileArr=Array.from（文件） 文件排列拼接（idx，1） 让tempObj:any=Object.assign（{length:fileArr.length}，fileArr） console.log（tempObj）； 设置文件（tempObj）； } } 
函数removeFile（输入，索引）{ input.files=[…input.files] 减少（（dt，f，i）=>{ 如果（i！==索引）{ dt.项目.添加（f）； } 返回dt； }，新数据传输（） .文件； } 函数removeFile（输入，索引）{ input.files=[…input.files] .reduce（（dt，f，i）=>（i！==索引&&dt.items.add（f）&&0）||dt，new DataTransfer（）） .文件； } 
var myReadWriteList=新阵列（）； //用户稍后选择文件。。。 //那么只要方便。。。 myReadWriteList=文件列表只读； 
-
4 我写得太快了。。。。 似乎当一个人将var设置为等于文件列表时，只读问题又回来了。。。。 因此，我选择做的是双重的&稍微痛苦但有效的。。。 我保存了一个可查看的文件列表以供上传，用户可以从这里删除。。。 显然，在<ul>标记中删除<li>标记很简单。。。 所以我想到的唯一方法是保留一个删除文件的二级列表，并在上传过程中引用它。。。 因此，如果文件在上传列表中，我就跳过它，用户也不会知道。 – 卡里·阿布拉莫夫 评论 2011年3月23日21:01 -
1
自我$ refs.inputFile.value=“” 