Kommentar: Heute werde ich Ihnen eine einfache Anwendung mitzeigen, um die Methode der Verwendung von FileReader zu demonstrieren. FileReader ist eine in HTML5 bereitgestellte Dateioperations -API. Freunde, die es brauchen, können davon lernen.
In den vorherigen Artikeln habe ich Ihnen mehrere HTML5 -Beispiele mit Ihnen geteilt, nämlich die Demonstration der Drag & Drop -Funktion, die Demonstration des bearbeitbaren Seiteninhalts und die lokale Speicherfunktionsdemonstration. Heute werde ich Ihnen eine einfache Anwendung mitteilen, um die Methode der Verwendung von FileReader, einer in HTML5 bereitgestellten Dateioperation -API, zu demonstrieren.Wenn Sie sich die HTML 5 -Beispiele ansehen, die ich zuvor geschrieben habe, denke ich darüber nach, ein einfaches, aber anwendbares Beispiel zu erstellen, um diese neuen HTML5 -Funktionen auf noch bizarrere Weise zu bohren. Mein Ziel ist es nicht, diese HTML 5 -APIs einfach zu zeigen, sondern Beispiele zu verwenden, um den Entwicklern zu sagen, wie diese APIs wirklich praktisch und innovativ implementiert werden können.
In HTML5 wird der Zugriff auf das lokale Dateisystem von einer Webseite sehr einfach, dh unter Verwendung der Datei -API. Diese Dateispezifikation bietet eine API zur Darstellung von Dateiobjekten in einer Webanwendung. Sie können sie auswählen und über die Programmierung auf ihre Informationen zugreifen. Diese Datei -API enthält:
Eine filelistische Sequenz stellt ein Array einzelner Dateien dar, die im lokalen System ausgewählt wurden. Die zur Auswahl einer Datei verwendete Benutzeroberfläche kann über den Aufruf <Eingabe type = Datei> implementiert werden.
Eine Blob -Schnittstelle, die die ursprünglichen Binärdaten darstellt, über die Sie auf die Byte -Daten zugreifen können.
Eine Dateischnittstelle enthält nur schreibgeschützte Attributinformationen einer Datei wie Dateinamen, Dateityp und Dateidatenzugriffsadresse.
Eine FileReader -Schnittstelle, die eine Methode zum Lesen einer Datei und eines Ereignismodells bietet, das das Ergebnis einer Datei gelesen wird.
Eine DateiError -Schnittstelle und ein DateiException -Objekt, das die Fehlererzeugungsbedingungen in dieser Spezifikation definiert.
So verwenden Sie dieses Beispiel: In diesem Beispiel habe ich ein Kunstboard angegeben, in dem Sie ein Bild aus dem lokalen Dateisystem ziehen können, oder Sie können auch das Feld "Dateiauswahl" verwenden, um das Bild auszuwählen. Bitte wählen Sie im Beispiel nur die Bilddatei aus, ich habe keine Dateifilter- und Dateitypprüfung hinzugefügt. Denken Sie daran, dass kein Browser HTML5 vollständig implementiert. Dieses Beispiel muss in einem Browser ausgeführt werden, der HTML5 wie Firefox 3.5 oder höher unterstützt.
Die Hauptmethode zur Implementierung der Datei -API ist sehr einfach, genau wie die folgenden:
Funktionsbildung (myFiles) {
für (var i = 0, f; f = myFiles [i]; i ++) {
var impereader = new fileReader ();
ImageReader.onload = (Funktion (afile) {
Rückgabefunktion (e) {
var span = document.createelement ('span');
span.innerhtml = ['<img src = "', e.target.result, '"/>']. join ();
document.getElementById ('Thumbs') .InsertBefore (span, null);
};
})(F);
ImageReader.ReadasDataurl (f);
}
}
Funktion Dropit (e) {
bildendeteilt (e.datatransfer.files);
E.Stoppropagation ();
E.PreventDefault ();
}
Ich habe mich entschieden, mein ONDROP -Event auf <Td> zu platzieren:
<td align = linke Höhe = 105 ″ ONDRAGEERTER = RECHTSISCH FALSE ONDRAGOVER = RETCAL FALSE ONDROP = DROPIT (Ereignis)>
<Ausgabe -ID = Thumbs> </output>
</td>
In diesem Beispiel ziehe ich die lokale Datei einfach in die Kunstboote. Ich denke jedoch, dass es Ihnen die einfachen, aber leistungsstarken Funktionen der Datei -API zeigen kann