Es gibt ein Dateiobjekt in JavaScript; das Dateiobjekt stellt eine Datei dar und wird zum Lesen und Schreiben von Dateiinformationen verwendet. Dieses Objekt erbt die Funktionen im Zusammenhang mit dem Dateisystem Es kann ein Blob-Objekt verwendet werden. Es kann den Konstruktor „new File(fileParts, fileName, [options])“ verwenden, um das Dateiobjekt abzurufen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Dateiobjekt
Das File-Objekt stellt eine Datei dar und wird zum Lesen und Schreiben von Dateiinformationen verwendet. Es erbt das Blob-Objekt oder ist ein spezielles Blob-Objekt, das in allen Situationen verwendet werden kann, in denen das Blob-Objekt verwendet werden kann.
Der häufigste Anwendungsfall ist die Datei-Upload-Steuerung () des Formulars. Nachdem der Benutzer eine Datei ausgewählt hat, generiert der Browser ein Array, das jede vom Benutzer ausgewählte Datei enthält.
// Der HTML-Code lautet wie folgt // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file exampleof File // trueIm obigen Code ist „Datei“ die erste vom Benutzer ausgewählte Datei, die eine Instanz von „Datei“ ist.
Konstrukteur
Der Browser stellt nativ einen File()-Konstruktor zum Generieren von File-Instanzobjekten bereit.
neue Datei (Array, Name [, Optionen])
Der File()-Konstruktor akzeptiert drei Parameter.
Array: Ein Array, dessen Mitglieder binäre Objekte oder Zeichenfolgen sein können, die den Inhalt der Datei darstellen.
name: Zeichenfolge, die den Dateinamen oder Dateipfad darstellt.
Optionen: Konfigurationsobjekt, legen Sie die Attribute der Instanz fest. Dieser Parameter ist optional.
Der dritte Parameter konfiguriert das Objekt und kann zwei Eigenschaften festlegen.
Typ: String, der den MIME-Typ des Instanzobjekts angibt. Der Standardwert ist ein leerer String.
lastModified: Zeitstempel, der den Zeitpunkt der letzten Änderung angibt, der Standardwert ist Date.now().
Unten finden Sie ein Beispiel.
var file = new File(['foo'], 'foo.txt', { type: 'text/plain', });Instanzeigenschaften und Instanzmethoden
Dateiobjekte haben die folgenden Instanzeigenschaften.
File.lastModified: Zeitpunkt der letzten Änderung
Dateiname: Dateiname oder Dateipfad
File.size: Dateigröße (Einheit Bytes)
File.type: MIME-Typ der Datei
var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0myFile.type // ""Da im obigen Code der Inhalt von myFile leer ist und der MIME-Typ nicht festgelegt ist, ist das Größenattribut gleich 0 und das Typattribut gleich der leeren Zeichenfolge.
Das File-Objekt verfügt über keine eigene Instanzmethode. Da es das Blob-Objekt erbt, können Sie die Blob-Instanzmethode „slice()“ verwenden.
Erweitern Sie Ihr Wissen:
Es gibt zwei Möglichkeiten, es zu erhalten.
neue Datei(fileParts, fileName, [Optionen])
fileParts – Array von Werten vom Typ Blob/BufferSource/String.
fileName – Dateinamenzeichenfolge.
Optionen – optionales Objekt:
lastModified – Der Zeitstempel der letzten Änderung (ganzzahliges Datum).Häufiger erhalten wir Dateien von <input type="file"> oder per Drag-and-Drop oder über andere Browserschnittstellen. In diesem Fall erhält die Datei diese Informationen vom Betriebssystem (OS).
Da File von Blob erbt, verfügt das File-Objekt über dieselben Eigenschaften, außerdem:
name – Dateiname, lastModified – der Zeitstempel der letzten Änderung.So erhalten wir das File-Objekt von <input type="file">:
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; // Zum Beispiel my.png Alert(`Zuletzt geändert: ${file.lastModified}`); // Zum Beispiel 1552830408824}</script> Einzelheiten: 
Bitte beachten Sie:
Input kann mehrere Dateien auswählen, daher ist input.files ein Array-ähnliches Objekt. Hier haben wir nur eine Datei, also nehmen wir einfach input.files[0].