Das Bild-Upload ist eine gewöhnliche Funktion, und die Bildvorschau ist eine unverzichtbare Unterfunktion in der Upload-Funktion. Zuvor habe ich das Onchange -Ereignis des Eingabe -Elements [type = Datei] abonniert, sobald der Pfad geändert wurde, wird das Bild auf den Server hochgeladen und dann wird der Bildpfad erhalten und der Wert wird dem IMG -Element zugewiesen. Unabhängig von der Lösung für die Einreichung von asynchronen Dateien sollen temporäre Vorschreiberbilder auf der Serverseite bereinigt werden, wodurch die Workload erhöht wurde.
Ich fand versehentlich die relevanten Informationen über die reine Front-End-Bildvorschau von MDN und sortierte sie dann aus und zeichnete sie als zukünftige Referenz auf.
1. Vorbereitung 1──Filerader
Filereader ist eine neue Funktion von HTML5 zum Lesen von Daten von Blob- und Dateitypen. Die spezifische Verwendung ist wie folgt:
(1). Konstruktionsmethode
var fr = neuer fileReader ();
(2). Attribute
ReadyState: Der Typ ist nicht vorzeichenlos, der aktuelle Status der FileReader-Instanz (leer-0, noch wurden keine Daten geladen; laden-1, Daten werden geladen; 2, alle Leseanforderungen wurden abgeschlossen), schreibgeschützt.
Ergebnis: Der Dateiinhalt gelesen, schreibgeschützt.
Fehler: Der Typ ist Domerror, der einen Fehler angibt, der beim Lesen der Datei schreibgeschützt ist.
(3). Verfahren
abort (): ablesen und leser Operation abgeben und ReadyState auf fertig stellen. Wenn keine Leseoperation ausgeführt wird, wird eine Ausnahme von DOM_FILE_ABORT_ERR ausgelöst.
ReadasArrayBuffer (Blob Blob): Daten lesen, das Ergebnisattribut wird auf ArrayBuffer -Typ gesetzt
Readastext (Blob Blob [, Coding = 'UTF-8']: Daten lesen, das Ergebnisattribut wird auf String-Typ eingestellt
ReadasbinaryString (Blob Blob): Daten lesen, das Ergebnisattribut wird auf die ursprünglichen Binärdaten eingestellt
ReadasDataurl (Blob Blob): Daten lesen, das Ergebnisattribut wird auf das Data URI -Schema -Formular gesetzt (Einzelheiten finden Sie unter "JS Magic Hall: Einführung in das Data URI -Schema").
(4). Ereignis
Onload: Ausgelöst, nachdem Daten erfolgreich gelesen wurden
OneReRror: Ausgelöst, wenn eine Ausnahme beim Lesen von Daten ausgelöst wird
OnloadStart: Ausgelöst vor dem Lesen von Daten
Onloadend: Ausgelöst nach dem Lesen von Daten, ausgelöst nach Onload oder OnError
Onabort: Ausgelöst nach Abbruch der Lektüre
On -Progress: während des Lesens regelmäßig ausgelöst
(5). Browserunterstützung
Ff3.6+, Chrome7+, IE10+
2. Vorbereitung 2 Rotimagetransform.Microsoft.Alphaimageloader -Filter
(1). Funktion: Die Hauptfunktion besteht darin, die Bilder transparent zu verarbeiten (IE5.5 ~ 6 unterstützt keine transparente PNG)
(2). Wie man in Stilen verwendet
#preview {filter: progid: diximagetransform.microsoft.Alphaimageloader (sizeMethod = scale, src = "dummy.png");};};(3). Wie man in js verwendet
var preview = document.getElementById ('preview'); preview.style.filter = preview.currentStyle.filter + ";(4). Attribute
Aktiviert: Optional, festlegen, ob der Filter aktiviert ist. Wertebereich true (Standard), falsch
Größenmethod: Optional, legt fest
SRC: Erforderlich, verwenden Sie absolute oder relative URL, um auf das Hintergrundbild zu verweisen. Wenn die URL die lokale Adresse des Benutzercomputers ist, wird eine Ausnahme, die keinen Zugriff auf das lokale Dateisystem ermöglicht, wenn das SRC des IMG -Elements die lokale Adresse des Benutzercomputers ist.
Durchführung
Als nächstes verwenden wir den ReadasDataurl von FileReader, um das Data URI -Schema zur Implementierung der Bildvorschau -Funktion zu erhalten, und wir verwenden den Filter DimaTransform.microsoft.Alphaimageloader zum Heruntergraden.
HTML -Fragment:
<style type = "text/css">#preview {width: 100px; Höhe: 100px;} </style> <!-[wenn lte ie 9]> <style type = "text/css"> #preview {filter: progid: dimaTransform.microsoft.Alphaimageloader (SIZIZEMETHOD = SAUER); } </style> <! [endif]-> <Eingabe type = "file" onchange = "showPreview (this);"/> <div id = "preview"> </div>JS -Fragment:
var preview = function (el) {var pv = document.getElementById ("preview"); // IE5.5 ~ 9 Verwenden Sie Filter if (Pv.Filters && typeof (pv.filters.item) === 'Funktion') {Pv.Filters.Item ("DimaMagetRansform.Microsoft.Alphaimageloader"). Src = el.value; } else {// Andere Browser und IE10+ (Filter unterstützen nicht) Verwenden Sie FileReader var fr = new FileReader (); fr.onload = function (evt) {var pvimg = new Image (); pvimg.style.width = pv.offsetwidth + 'px'; pvimg.style.height = pv.offseteight + 'px'; pvimg.src = evt.target.result; pv.removechild (0); pv.Appendchild (pvimg); }; Fr.readasdataurl (El. Files [0]); }};4. Grube
Da IE11 Sicherheitsüberlegungen vorgenommen hat, ist es unmöglich, die reale Adresse der ausgewählten Datei des Benutzers über Wert, OuterHtml und GetAttribute im Eingabe -Element [type = Datei] zu erhalten und nur den Namen C:/ FakePath/ Datei zu erhalten. Wenn IE11 verwendet wird, der Textmodus jedoch auf unter 10 gesetzt ist, gibt es keine Möglichkeit, eine Bildvorschau zu erreichen.
Lösung 1 laden diesen Satz unter dem Kopf-Tag: <meta http-äquiv = "x-ua-kompatible" content = "ie = edge">. Dies wird dem IE zeigen, dass die höchste Version des aktuellen IE verwendet werden kann, um Webseiten standardmäßig zu analysieren und zu rendern.
Lösung 2 ─äre Dokument. Auswahl. Der spezifische Betrieb ist wie folgt:
// Angenommen, Fileel ist die [type = file] element Fileel.Select (); var filepath = document.Select.CreateReCollection () [0] .htmlText;
5. Ergänzung: Verwenden Sie Fenster.
Das durch die readasDataurl -Methode von FileReader erhaltene Daten -URI -Schema erzeugt eine sehr lange Base64 -Zeichenfolge. Wenn das Bild größer ist, ist die Zeichenfolge länger. Wenn der Seiten -Reflow auftritt, verursacht er die Leistungsverschlechterung. Die Lösung lautet wie folgt:
1. Das vorgeschriebene IMG -Tag verwendet die absolute Positionierung, um aus dem normalen Dokumentenfluss herauszukommen, was nichts mit anderen Elementen des Dokuments zu tun hat und die Leistung beim Refügen nicht beeinträchtigt.
2. Verwenden Sie das Fenster.
var createObjecturl = Funktion (Blob) {Rückgabefenster [Fenster.Webkiturl? 'webkiturl': 'url'] ['createObjecturl'] (Blob);};HINWEIS: Der von window.url.createObjecturl generierte Datenlink ist Speicherausschluss. Wenn Sie sie also von Zeit zu Zeit verwenden, müssen Sie das Fenster anrufen. Der Inhalt wird auch automatisch veröffentlicht, wenn die Seite aktualisiert wird.
var ResolveObjecturl = Funktion (Blob) {Fenster [Fenster.Webkiturl? 'webkiturl': 'url'] ['revokeObjecturl'] (Blob);};Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.