Die HTML5 -Dateischnittstelle verwendet Dateien, um auf der Webseite herunterzuladen

Die Dateischnittstelle enthält Informationen zu Dateien und führt JavaScript auf der Webseite aus, um auf den Inhalt der Datei zuzugreifen.

Das Dateiobjekt stammt vom vom Benutzer zurückgegebenen filelistischen Objekt, um die Datei mit dem Eingabetag aus dem DataTransfer -Objekt des Drag & Drop -Vorgangs auszuwählen. Das Dateiobjekt ist ein spezieller Blob, der in jedem Kontext verwendet werden kann, der im Blob verwendet werden kann.

Um Dateien auf der Webseite zu verwenden, sind die Objekte, die normalerweise beteiligt sein müssen,: Dateiobjekt, filelistisches Objekt, FileReader -Objekt.

Der Filelist kommt von zwei Stellen, der Dateieneigenschaft des Eingabeelements und der Drag & Drop -API (wenn die Datei gezogen wird, das Ereignis.Datatransfer.files ist ein filelistisches Objekt)

 <input id = fileItem type = file> var filelist = document.getElementById ('fileItem')

Länge: Dieses Attribut gibt nur die Länge des im filelistischen Objekts enthaltenen Dateiobjekts zurück.

Element (Index): Erhalten Sie das in der angegebene Position im filelistische Objekt angegebene Dateiobjekt. Es kann in Form mehrerer Array -Indizes informiert werden

Jedes des filelistischen Objekts ist das Dateiobjekt. Dateiobjekt ist ein spezieller Blob.

1. Lastmodify: Die Zeit, in der die Datei überarbeitet wird, sind die Millisekunden am 1. Januar 1970 um 0: 0: 00. Es ist ein lesbares Attribut

2.Name: Der Dateiname der Datei, auf die vom Dateiobjekt verwiesen wird, das ein lesbares Attribut ist

3.Typ: Der Dateityp der vom Dateiobjekt verwiesenen Datei ist ein Minenart, bei dem es sich um ein lesbares Attribut handelt.

4.Size: Die Dateigröße der Datei, auf die das Dateiobjekt verwiesen wird, ist dieses Attribut.

Es gibt keine Möglichkeit, das Dateiobjekt allein zu definieren, aber es hat eine Möglichkeit, vom Blob -Objekt zu erben.

Mit dem FileReader -Objekt können Webanwendungen asynchron auf dem Benutzer des Benutzers lesen.

FileReader () ist ein Konstruktor, der durch ihn ein neues FileReader -Objekt erstellen kann.

var fileReader = new fileReader ();

1.Error: Gibt den Fehler zurück, der während des Lesevorgangs auftritt.

2.RESULT: Gibt den Inhalt der Datei zurück, und der Typ ist es wert, einzugeben oder zu arrayBuffer. Dieses Attribut ist erst nach dem Lesen der Operation legal.

3.ReadyState: Gibt den aktuellen Zustand der Operation zurück.

1.abort (): Interrupt -Lesevorgang. Der Wert von ReadyState wird zu 2. 2.

2. ReadasArrayBuffer (Blob): Lesen Sie den angegebenen Blob, z. B. ein Dateiobjekt (Dateiobjekt ist ein spezieller Blob). Solange die Lektüre abgeschlossen ist, wird der Wert der ReadyState -Eigenschaft 2 und das Ergebnisattribut ist ein ArrayBuffer, der Dateidaten darstellt.

3.. ReadasDataurl (BLOB): Lesen Sie den angegebenen Blob, z. B. ein Dateiobjekt (einen speziellen Blob). Solange die Lektüre abgeschlossen ist, wird der Wert des ReadyState -Attributs zu 2.. Das Ergebnisattribut ist eine URL, die die Dateidaten darstellt, und das Datenformat ist die Basis64 -kodierte Zeichenfolge

 <Eingabetyp = Datei onchange = previewFile ()> <br> <img src = height = 200 var preview = document.queerySelector ('IMG'); Dateien [0];

4. Readastext (Boob, Codierung): Lesen Sie den angegebenen Blob wie ein Dateiobjekt (Dateiobjekt ist ein spezieller Blob). Solange Sie es lesen, wird der Wert der ReadyState -Eigenschaft 2 und das Ergebnisattribut ist eine Textzeichenfolge, die die Dateidaten darstellt. Der zweite Parameter ist optional.

1.Abort: Beendigung beim Lesen von Betrieb.

2. Fehler: Ausgelöst beim Lesen von Operationen während des Betriebs.

3.LOAD: Ausgelöst, wenn Sie den Vorgang erfolgreich lesen.

4. LOADED: Am Ende des Lesevorgangs ausgelöst. Erfolg oder Misserfolg kann nicht lesen.

5.LoadStart: Zu Beginn des Lesevorgangs ausgelöst.

6.Prozess: während des Lesevorgangs ausgelöst.

Mit dem Dateiobjekt in HTML5 können Sie auf die ausgewählten lokalen Dateien zugreifen und den Inhalt in diesen Dateien lesen. Das Dateiobjekt stammt entweder aus dem Eingabeelement oder der Drag & Drop -Schnittstelle.

 <Eingabe type = Datei id = Eingabe>

Greifen Sie auf Dateien zu, die über die Eingabe ausgewählt wurden

 var selectFile = document.getElementById ('Eingabe').

Sie können jeweils nur eine Datei gleichzeitig auswählen. Wählen Sie vor Gecko 1.9.2 gleichzeitig mehrere Dateien aus.

Für die Drag & Drop -Schnittstelle können Sie HTML5 -Dragevent anzeigen.

Schritt 1: Erstellen Sie einen Platzierungsbereich. Ein gewöhnliches Element wie Div, P usw.

Schritt 2: Fügen Sie dem platzierten Bereich Drop-, Dragenter-, Dragover -Event -Verarbeitungsprogramm hinzu. Die Schlüsselrolle ist das DROP -Ereignisverarbeitungsprogramm.

Unten finden Sie ein Beispiel für ein kurzes Drawing -Diagramm:

 <div id = 'Dropbox' class = 'Dropbox'> </div> .dropbox {Border: Solid 3px rot;

 Var Dropbox; (e) {E.Stoppropagation (); ); var dt = e.datatransfer; i]; );

Die oben genannte HTML5 -Dateischnittstelle, die von Xiaobian vorgestellt wurde, um Dateien auf der Webseite herunterzuladen. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!