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

Aus Sicherheitsgründen kann in IE11 die tatsächliche Adresse der vom Benutzer ausgewählten Datei nicht über value, äußereHTML und getAttribute im Element input[type=file] abgerufen werden. Es kann nur der Dateiname von C: fakepath abgerufen werden . . Wenn Sie also IE11 verwenden, der Textmodus jedoch auf unter 10 eingestellt ist, gibt es keine Möglichkeit, eine Bildvorschau zu erreichen.

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; 

五、补充：使用window.URL.createObjectURL代替FileReader　　　　　　

通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串，若图片较大那么字符串则更长，若页面出现reflow时则会导致性能下降。解决方案如下：

1. 预览的img标签使用绝对定位，从而脱离正常文档流，那么就与文档的其他元素无关了，而reflow时则不会影响性能。

2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

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

注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn