angular - Hvordan filtrere et FileList-objekt valgt av katalogvelger i Javascript/typescript?

Jeg prøver å filtrere eller fjerne noen filer fra FileList-objektet. Jeg har fått et FileList-objekt fra katalogvelgeren.

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

I min .ts-fil:

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

selectedFileList inneholder forskjellige typer filer som image/jpg, image/png, application/javascript, application/pdf osv. Jeg vil få et FileList-objekt med bare bildefiler. Hvordan kan jeg få det?

Merk: accept="image/*" i HTML input-element fungerer ikke her.

{
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",
}

Her i koden min error: files.slice er ikke en funksjon

Svar #1

Bruk spread-operatoren ... for å konvertere FileList til Array og filtrer den ved å sjekke om type inneholder deltekst 'image'.

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

Demo

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>

Rediger

Hvis spredningsoperator ikke støttes i nettleseren din, bruk en av følgende

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

Eller

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

Relaterte artikler