Il existe un objet fichier en JavaScript ; l'objet fichier représente un fichier et est utilisé pour lire et écrire des informations sur le fichier. Cet objet hérite de l'objet Blob et étend les fonctions liées au système de fichiers. un objet Blob peut être utilisé ; il peut utiliser le constructeur "new File(fileParts, fileName, [options])" pour obtenir l'objet fichier.
L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.
Objet fichier
L'objet File représente un fichier et est utilisé pour lire et écrire des informations sur le fichier. Il hérite de l'objet Blob, ou est un objet Blob spécial, qui peut être utilisé dans toutes les situations où l'objet Blob peut être utilisé.
Le cas d'utilisation le plus courant est le contrôle de téléchargement de fichiers () du formulaire Une fois que l'utilisateur a sélectionné un fichier, le navigateur génère un tableau contenant chaque fichier sélectionné par l'utilisateur. Ce sont tous des objets d'instance de fichier.
// Le code HTML est le suivant // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // trueDans le code ci-dessus, file est le premier fichier sélectionné par l'utilisateur, qui est une instance de File.
Constructeur
Le navigateur fournit nativement un constructeur File() pour générer des objets d'instance File.
nouveau fichier (tableau, nom [, options])
Le constructeur File() accepte trois paramètres.
Tableau : un tableau dont les membres peuvent être des objets binaires ou des chaînes, représentant le contenu du fichier.
name : chaîne, représentant le nom du fichier ou le chemin du fichier.
options : objet de configuration, définissez les attributs de l'instance. Ce paramètre est facultatif.
Le troisième paramètre configure l'objet et peut définir deux propriétés.
type : chaîne, indiquant le type MIME de l'objet d'instance. La valeur par défaut est une chaîne vide.
lastModified : horodatage, indiquant l'heure de la dernière modification, la valeur par défaut est Date.now().
Ci-dessous un exemple.
var file = new File(['foo'], 'foo.txt', { type : 'text/plain', });Propriétés d'instance et méthodes d'instance
Les objets fichier ont les propriétés d'instance suivantes.
File.lastModified : heure de la dernière modification
File.name : nom du fichier ou chemin du fichier
File.size : taille du fichier (unité octets)
File.type : type MIME du fichier
var monFichier = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0monFichier.type // ""Dans le code ci-dessus, puisque le contenu de myFile est vide et que le type MIME n'est pas défini, l'attribut size est égal à 0 et l'attribut type est égal à la chaîne vide.
L'objet File n'a pas sa propre méthode d'instance puisqu'il hérite de l'objet Blob, vous pouvez utiliser la méthode d'instance Blob slice().
Élargissez vos connaissances :
Il existe deux manières de l'obtenir.
nouveau fichier (fileParts, fileName, [options])
fileParts - Tableau de valeurs de type Blob/BufferSource/String.
fileName - chaîne du nom de fichier.
options - objet facultatif :
lastModified - L'horodatage de la dernière modification (date entière).Le plus souvent, nous obtenons des fichiers à partir de <input type="file"> ou par glisser-déposer ou d'autres interfaces de navigateur. Dans ce cas, le fichier obtiendra ces informations du système d'exploitation (OS).
Puisque File hérite de Blob, l’objet File a les mêmes propriétés, plus :
name - nom du fichier, lastModified - l'horodatage de la dernière modification.Voici comment nous obtenons l'objet File à partir de <input type="file"> :
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; alert(`Nom du fichier : ${file.name}`); // Par exemple my.png alert(`Dernière modification : ${file.lastModified}`); // Par exemple 1552830408824}</script> Détails: 
Veuillez noter:
L'entrée peut sélectionner plusieurs fichiers, donc input.files est un objet de type tableau. Ici, nous n'avons qu'un seul fichier, nous prenons donc simplement input.files[0].