Question

我正在尝试从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对象。我怎么能得到它？

注意：accept =＆＃34; image / *＆＃34;在HTML输入元素中不起作用。

{
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 is not a function

Answer 1

使用传播运营商 ...将FileList转换为Array，并通过检查其type是否包含子文{{}来过滤相同内容1}}。

'image'

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

修改

如果浏览器不支持展开运算符，请使用以下
之一
<input type="file" accept="image/*" webkitdirectory directory multiple>

或者

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

如何在Javascript / typescript中过滤目录选择器选择的FileList对象？

1 个答案: