javascript - 删除通过 html 输入上传的重复文件不起作用
问题描述
我目前正在构建一个文件上传,我可以上传一个或多个 .xml 文件。
<button mat-raised-button class="button" (click)="fileInput.click()"
<span>Choose files</span>
<input #fileInput type="file" multiple accept=".xml" style="display:none;" (change)="onFileInput($event)">
</button>
onFileInput 方法将这些文件推送到一个数组中。
onFileInput($event) {
Array.from($event.target.files).forEach(file => {
this.files.push(file);
})
this.files = [...new Set(this.files)];
}
问题是如果我更改上传的文件数量,我可以多次上传同一个文件。
案例1:上传文件1,2
上传文件1,2
this.files 包含文件1,2
到目前为止,一切都很好
案例2:上传文件1,2
上传文件1
this.files 包含1,2,1
上传文件1
this.files 仍然包含1,2,1
上传文件2
this.files 包含1,2,1,2
我希望你能理解这个问题并帮助我,因为我找不到我的错误。
提前致谢
解决方案
你可以简单地通过比较文件名来做到这一点。
arr = [];
function onFileInput(e) {
let files = e.target.files;
for (let i = 0; i < files.length; i++) {
if (arr.indexOf(files[i].name) === -1) {
arr.push(files[i]);
}
}
}
推荐阅读
- r - Is there any R code to repeat a same value for multiple rows?
- javascript - Can you style an element with JavaScript without adding a style attribute?
- gitlab - 通过 Zapier 连接 Gitlab(防火墙后)和 Trello
- java - 有没有一种有效的方法可以在我的游戏中连续创建更多矩形?
- regex - 正则表达式匹配稍后在同一行中找不到的字符串
- delphi - delphi 一种将十六进制字符串转换为二进制字符串的快速方法
- java - 为什么我会收到错误消息说程序找不到我的文本文件
- python - 无法打开 lib 'ODBC Driver 17 for SQL Server':找不到文件
- html - 多屏图像响应
- android - E/RecyclerView:没有附加适配器;跳过布局。没有数据显示