如何在Javascript/Typescript中使用目录选择器过滤FileList对象？

Question

如何在Javascript/Typescript中使用目录选择器过滤FileList对象？

10

我正在尝试从FileList对象中过滤或删除一些文件。我已经从目录选择器中获取了一个FileList对象。

<input type="file" accept="image/*" webkitdirectory directory multiple>

在我的.ts文件中：

public fileChangeListener($event: any) {
 let selectedFiles=$event.target.files; //Object of Filelist
}

selectedFileList 包含不同类型的文件，如 image/jpg、image/png、application/javascript、application/pdf 等。我想要只获取图像类型文件的 FileList 对象。我该如何做到？

注意：HTML 输入元素中的 accept="image/*" 在这里不起作用。

{
lastModified:1521624250148,
lastModifiedDate:Wed Mar 21 2018 15:24:10 GMT+0600 (+06) {},
name:"rxlnn70l.bmp",
size:814138,
type:"image/bmp",
webkitRelativePath:"second/rxlnn70l.bmp",
}

在我的代码中出现了错误：error: files.slice 不是一个函数

- Shamim Hossain

欢迎来到 Stack Overflow！请参观 [tour] 并阅读 [help]，特别是 如何提出好问题？。在 SO 上搜索相关主题并尝试解决问题。如果您遇到困难并且在进行更多研究和搜索后无法解决，请发布一个 [mcve] 并明确说明您的困境所在。人们将很乐意帮助您。祝你好运！ - T.J. Crowder

"我想获取一个仅包含图像类型文件的 FileList 对象。" 你不能这样做，因为你无法构建它们。但是，你可以从中创建一个仅包含你想要的 File 对象的数组。 - T.J. Crowder

2

可能是重复的问题，参考如何允许<input type="file">仅接受图像文件。 - Narendra Jadhav

我从目录选择器中选择文件，但accept属性在我的情况下不起作用。 - Shamim Hossain

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gurvinder372 · Accepted Answer

使用展开运算符...将FileList转换为Array，并通过检查其type是否包含子文本'image'来过滤它们。

   var files = e.target.files;
   files = [...files].filter( s => s.type.includes("image") )

演示

document.querySelector( "[type='file']" ).addEventListener( "change", function(e){
   var files = e.target.files;
   files = [...files].filter( s => s.type.includes("image") )
   console.log(files);
})

<input type="file" accept="image/*" webkitdirectory directory multiple>

编辑

如果您的浏览器不支持扩展操作符，请使用以下其中之一：

files = Array.from(files).filter( function(s){ 
    return s.type.includes("image") ;
});

或者

files = [].slice.call(files).filter( function(s){ 
    return s.type.includes("image") ;
});