HTML5-Implementierung von Methoden für den Zugriff auf lokale Dateien

Dieser Artikel stellt hauptsächlich die Methode zum Zugriff auf lokale Dateien in HTML5 vor. Jetzt kann ich ihn mit Ihnen teilen.

Heute werde ich ihn mit Ihnen teilen Eine einfache Anwendung zur Demonstration der Verwendung von FileReader ist eine in HTML5 bereitgestellte Dateioperations-API. Freunde, die sie benötigen, können sich darüber informieren. 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.
Während 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 3525558f8f338d4ea90ebf22e5cde2bc 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.

Der Hauptweg zur Implementierung der Datei-API ist sehr einfach, 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 = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].join(”); 
document.getElementById(‘thumbs’).insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
function dropIt(e) { 
imagesSelected(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
}

Ich habe mich dafür entschieden, mein Ondrop-Event auf b6c5a531a458a2e790c1fd6421739d1c zu platzieren:

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

In diesem Beispiel habe ich einfach die lokale Datei in die Zeichenfläche gezogen. Ich denke jedoch, dass es Ihnen die einfachen, aber leistungsstarken Funktionen der Datei-API zeigen kann.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So implementieren Sie die Live-Video-Funktion in HTML5

Das mobile Endgerät verwendet H5, um das zu implementieren Funktion zum Komprimieren von Bild-Uploads

Über den H5-Code zum Aufrufen der Kamera, Bilder aufzunehmen und die Bilder zu komprimieren

Das obige ist der detaillierte Inhalt vonHTML5-Implementierung von Methoden für den Zugriff auf lokale Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!