HTML5 implementiert ein Beispiel für den Zugriff auf lokale Dateien._HTML5-Tutorial-Fähigkeiten

In den vorherigen Artikeln habe ich mehrere HTML5-Beispiele mit Ihnen geteilt, darunter eine Demonstration der Drag-and-Drop-Funktion, eine Demonstration der bearbeitbaren Seiteninhalte und eine Demonstration der lokalen Speicherfunktion. Heute werde ich Ihnen eine einfache Anwendung vorstellen, um die Verwendung von FileReader zu demonstrieren. FileReader ist eine in HTML5 bereitgestellte Dateioperations-API.

Als Sie sich das HTML 5-Beispiel angesehen haben, das ich zuvor geschrieben habe, habe ich darüber nachgedacht, ein einfaches, aber anwendbares Beispiel zu erstellen, um diese neuen HTML5-Funktionen auf neuartigere Weise zu üben. Mein Ziel ist es nicht, diese HTML 5-APIs einfach zu demonstrieren, sondern Entwicklern anhand von Beispielen zu zeigen, wie sie diese APIs tatsächlich auf praktische und innovative Weise implementieren können.

In HTML5 wird der Zugriff auf das lokale Dateisystem von einer Webseite aus sehr einfach, nämlich über die Datei-API. Diese Dateispezifikation stellt eine API zur Darstellung von Dateiobjekten in Webanwendungen bereit. Sie können sie auswählen und programmgesteuert auf ihre Informationen zugreifen. Diese Datei-API umfasst:
Eine FileList-Sequenz, die ein Array darstellt, das aus einzelnen im lokalen System ausgewählten Dateien besteht. Die Benutzeroberfläche zur Auswahl von Dateien kann durch den Aufruf von implementiert werden.
Eine Blob-Schnittstelle, die rohe Binärdaten darstellt. Über das Blob-Objekt können Sie auf die darin enthaltenen Byte-Daten zugreifen.
Eine Dateischnittstelle, die schreibgeschützte Attributinformationen der Datei speichert, wie z. B. Dateiname, Dateityp und Dateidatenzugriffsadresse.
Eine FileReader-Schnittstelle, die Methoden zum Lesen einer Datei und ein Ereignismodell zum Erhalten von Dateileseergebnissen bereitstellt.
Eine FileError-Schnittstelle und ein FileException-Objekt, die zum Definieren der Fehlerbedingungen in dieser Spezifikation verwendet werden.
So verwenden Sie dieses Beispiel: In diesem Beispiel habe ich eine Zeichenfläche angegeben, und Sie können ein Bild aus dem lokalen Dateisystem hineinziehen, oder Sie können auch das Dateiauswahlfeld verwenden, um ein Bild auszuwählen. Bitte wählen Sie im Beispiel nur Bilddateien aus. Ich habe keine Dateifilterung und Dateitypprüfung hinzugefügt. Bitte beachten Sie, dass kein Browser HTML5 vollständig implementiert. Dieses Beispiel muss in einem Browser ausgeführt werden, der HTML5 unterstützt, z. B. Firefox 3.5 oder höher.

Die Hauptmethode zum Implementieren der Datei-API ist sehr einfach, wie folgt:

Code kopieren Der Code lautet wie folgt:

function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [''].join(“); 🎜>document.getElementById('thumbs').insertBefore(span, null);
})(f);
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault(}


Ich wähle Mein Ondrop-Event platzieren auf :

Code kopieren


Der Code lautet wie folgt:

id=“thumbs“> ;

In diesem Beispiel ziehe ich nur eine lokale Datei in die Zeichenfläche, aber ich denke, es wird angezeigt Sie sehen, wie einfach die Datei-API ist