js implementiert reine Front-End-Bildvorschau_Javascript-Fähigkeiten

Das Hochladen von Bildern ist eine allgemeine Funktion und die Bildvorschau ist eine wesentliche Unterfunktion der Hochladefunktion. Zuvor habe ich das onchange-Ereignis des input[type=file]-Elements abonniert, das Bild auf den Server hochgeladen, sobald der Pfad geändert wurde, und dann den Bildpfad abgerufen und ihn dem img-Element zugewiesen. Unabhängig von der Lösung für die asynchrone Dateiübermittlung hat das Bereinigen dieser temporären Vorschaubilder auf der Serverseite bereits zu einer erheblichen Arbeitsbelastung geführt.

Ich habe versehentlich relevante Informationen zur reinen Front-End-Bildvorschau von MDN gefunden. Nachdem ich sie sortiert hatte, habe ich sie zur späteren Bezugnahme aufgezeichnet.

1. Vorbereitung 1──FileReader　　　　　　　

FileReader ist eine neue Funktion von HTML5, die zum Lesen von Blob- und Dateitypdaten verwendet wird. Die spezifische Verwendung ist wie folgt:

(1). Bauweise

var fr = new FileReader();
(2). Attribute

readyState: Typ ist unsigned short, der aktuelle Status der FileReader-Instanz (EMPTY – 0, es wurden keine Daten geladen; LOADING – 1, Daten werden geladen; DONE – 2, alle Leseanforderungen wurden abgeschlossen), schreibgeschützt.

Ergebnis: der gelesene Dateiinhalt, schreibgeschützt.

Fehler: Typ ist DOMError, was auf einen Fehler hinweist, der beim Lesen der Datei aufgetreten ist, schreibgeschützt.

(3). Methode

abort(): Brechen Sie den Lesevorgang ab und setzen Sie readyState auf DONE. Wenn kein Lesevorgang ausgeführt wird, löst der Aufruf dieser Methode eine DOM_FILE_ABORT_ERR-Ausnahme aus.

readAsArrayBuffer(Blob blob): Daten lesen, das Ergebnisattribut wird auf den ArrayBuffer-Typ gesetzt

readAsText(Blob blob [,kodierung='utf-8']): Daten lesen, das Ergebnisattribut wird auf den String-Typ gesetzt

readAsBinaryString(Blob blob): Daten lesen, das Ergebnisattribut wird auf binäre Rohdaten gesetzt

readAsDataURL(Blob blob): Daten lesen, das Ergebnisattribut wird auf das Daten-URI-Schema-Formular festgelegt (weitere Informationen finden Sie unter „JS Magic Hall: Einführung in das Daten-URI-Schema“)

(4).Ereignis

onload: Wird nach erfolgreichem Lesen der Daten ausgelöst

onerror: Wird ausgelöst, wenn beim Lesen von Daten eine Ausnahme ausgelöst wird

onloadstart: wird vor dem Lesen von Daten ausgelöst

onloadend: ausgelöst nach dem Lesen von Daten, ausgelöst nach onload oder onerror

onabort: ausgelöst nach Abbruch des Lesevorgangs

onprogress: wird regelmäßig während des Lesevorgangs ausgelöst

(5). Browser unterstützt

FF3.6+, Chrome7+, IE10+

2. Vorbereitung 2──DXImageTransform.Microsoft.AlphaImageLoader-Filter　　

(1). Funktion: Die Hauptfunktion besteht darin, Bilder transparent zu machen (IE5.5~6 unterstützt kein transparentes PNG)

(2). Wie man es in Stilen verwendet

#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

(3). So verwenden Sie es in JS

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4). Attribute

aktiviert: Optional, legen Sie fest, ob der Filter aktiviert ist. Wertebereich wahr (Standard), falsch

SizingMethod: Optional, legen Sie fest, wie das gefilterte Bild innerhalb der Containergrenze angezeigt wird, Wertebereich Zuschneiden (Bild auf die Containergröße zuschneiden), Bildgröße (Standardwert, Containergröße vergrößern oder verkleinern, um auf das Bild zu passen). ), skalieren (das Bild an die Containergröße anpassen)

src: erforderlich, verwenden Sie eine absolute oder relative URL, um auf das Hintergrundbild zu verweisen. Es ist gültig, wenn die URL die lokale Adresse des Computers des Benutzers ist und wenn der src des img-Elements die lokale Adresse des Computers des Benutzers ist, wird eine Ausnahme ausgelöst, die keinen Zugriff auf das lokale Dateisystem zulässt.

Drei , Implementierung 　　　　　　　　　　

Als nächstes verwenden wir die readAsDataURL von FileReader, um das Daten-URI-Schema zur Implementierung der Bildvorschaufunktion zu erhalten. In IE5.5~9 verwenden wir den Filter DXImageTransform.Microsoft.AlphaImageLoader für die Downgrade-Verarbeitung.

HTML-Fragment:

<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

js-Snippet:

var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};

4. Fallstricke

Lösung 1──Fügen Sie diesen Satz unter dem Head-Tag hinzu:

Lösung 2── Verwenden Sie document.selection.createRangeColleciton(), um die tatsächliche Adresse zu erhalten:

// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText; 

var createObjectURL = function(blob){
 return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};