L'objet fichier

Les navigateurs nous fournissent unFileobjet.

L'objet File est unGoutteobjet, et il fournit 3 propriétés en plus:

• name(uneChaîne de caractères)
• lastModified(leHorodatage UNIXde la dernière date et heure de modification)

qui s'ajoute à laBlobpropriétés de l'objet:

• size(la taille en octets)
• type(le type MIME)

Vous recevrez unFileobjet lors de l'interaction avec leFileListobjet, qui peut être récupéré à partir d'un formulaire HTML avec un<input type="file" />élément, ou lors de l'interaction avecGlisser déposer.

Quand tu as unFileListobjet, lorsque vous bouclez dessus ou que vous choisissez un élément (par exemple le premier élément avecmyFileList[0]) vous obtiendrez unFileobjet.

Dites que vous avez uninput type="file"élément dans votre formulaire:

<input type="file" />

Maintenant, vous pouvez écouter lechangeévénement sur cet élément, donc lorsque vous choisissez un fichier, vous obtiendrez des informations à ce sujet.document.querySelector('input').filesretournera unFileListobjet, comme expliqué ci-dessus, et en utilisant[0]nous obtenons le premier fichier chargé, et nous pouvons accéder à toutes les propriétés dont nous avons besoin à partir duFileobjet:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(`The file ${file.name} was last modified on ${new Date(file.lastModified).toDateString()}`)
})

Voir le styloDémo d'objet fichierpar Flavio Copes (@flaviocopes) surCodePen.