1. Datei -API
HTML5 enthält zwei Methoden: Datei und FileReader, mit denen Dateiinformationen gelesen und Dateien gelesen werden können.
2. Beispiel
<html> <body> <div id = "test-Image-Preview" style = "border: 1px solid rgb (204, 204, 204); Breite: 100%; Höhe: 200px; type = "Datei" id = "test-Image-file"> <script type = "text/javaScript"> var FileInput = document.getElementById ('Test-Image-File'), info = document.getElementById ('Test-File-Info'), Preview = Dokument. function () {// Hintergrundbild: Vorschau.Style.BackgroundImage = ''; + 'Größe:' + file.size + '<br>' + 'modifiziert:' + Datei FileReader (); Reader.ReadasDataurl (Datei);}); </script> </body> </html>Die in Form von Dataurl gelesene Datei ist eine Zeichenfolge, ähnlich wie bei Daten: Bild/JPEG; Base64,/9J/4AAQSK ... (Basis64 -Codierung) ...
Häufig verwendet, um Bilder einzurichten. Wenn die serverseitige Verarbeitung erforderlich ist, senden Sie den String Base64 und die folgenden Zeichen an den Server und dekodieren Sie sie mit Base64, um den binären Inhalt der Originaldatei zu erhalten.
3. Erklärung
Der obige Code zeigt auch ein wichtiges Merkmal von JavaScript, nämlich der Einzel-Thread-Ausführungsmodus. In JavaScript führt die JavaScript-Ausführungs-Engine des Browsers beim Ausführen von JavaScript-Code immer im Einzel-Thread-Modus aus, was bedeutet, dass der JavaScript-Code zu jeder Zeit unmöglich ist, dass mehr als 1 Thread gleichzeitig ausgeführt wird.
Sie könnten fragen, wie Sie Multitasking im Single-Thread-Modus umgehen können.
In JavaScript wird Multitasking tatsächlich asynchron aufgerufen, wie z. B. den obigen Code:
Reader.ReadasDataurl (Datei);
Ein asynchroner Vorgang wird eingeleitet, um den Dateiinhalt zu lesen. Da es sich um einen asynchronen Betrieb handelt, wissen wir nicht, wann der Vorgang im JavaScript -Code endet. Daher müssen wir zuerst eine Rückruffunktion festlegen:
Reader.onload = Funktion (e) {// Wenn die Datei gelesen wird, wird diese Funktion automatisch bezeichnet:};Wenn die Lesen der Datei abgeschlossen ist, ruft die JavaScript -Engine die von uns festgelegte Rückruffunktion automatisch auf. Wenn die Rückruffunktion ausgeführt wird, wurde die Datei gelesen, sodass wir die Dateiinhalte in der Rückruffunktion sicher abrufen können.
Das obige einfache Beispiel für die Vorschau der JS -Upload -Datei ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.