Heim > Artikel > Web-Frontend > So implementieren Sie die lokale Vorschaufunktion für JavaScript-Bilder

So implementieren Sie die lokale Vorschaufunktion für JavaScript-Bilder

黄舟Original: 2017-09-22 09:43:471618Durchsuche

In diesem Artikel wird hauptsächlich JavaScript zur Implementierung der lokalen Bildvorschaufunktion vorgestellt. Er zielt auf die HTML5-Filterfunktion von Nicht-IE-Browsern und die zugehörigen Komponentenfunktionen des IE-Browsers ab, um den Effekt der Vorschau lokaler Bilder ohne Hochladen auf den Server zu erzielen Bei Bedarf finden Sie weitere Informationen unter Weiter

Das Beispiel in diesem Artikel beschreibt, wie die lokale Bildvorschaufunktion mithilfe von JavaScript implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Implementieren Sie sofort eine Vorschau, nachdem Sie die Bilddatei im Dateifeld ausgewählt haben. Es ist nicht erforderlich, es vorab auf den Server hochzuladen. Das gesamte Miniaturbild wird dann zur Vorschau mit Ajax zurück an das Frontend gesendet. Dies kann direkt mit JavaScript erfolgen und ist auch mit IE6 kompatibel. Der spezifische Effekt ist in der folgenden Abbildung dargestellt:

Die spezifische Implementierung besteht darin, HTML5 für die Anzeige in Nicht-IE-Browsern zu verwenden und die Filterfunktion von IE direkt aufzurufen Erreichen Sie es in IE-Browsern. Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片上传本地预览</title>
    <style type="text/css">
      /*设置IE滤镜，这里的id=imghead要与下方利用Javascript生成p的id相呼应。*/
      #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
      //图片上传预览，非IE则用了HTML5的代码，IE是用了滤镜
      function previewImage(file, MAXWIDTH, MAXHEIGHT){//MAXWIDTH、MAXHEIGHT与放预览图片的p——preview的大小相呼应
        var p = document.getElementById(&#39;preview&#39;);
        if (file.files && file.files[0]) {//HTML5部分
          p.innerHTML = "<img id=&#39;imghead&#39;></img>";
          var img = document.getElementById(&#39;imghead&#39;);
          img.onload = function(){
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            img.style.marginTop = rect.top + &#39;px&#39;;
          }
          var reader = new FileReader();
          reader.onload = function(evt){
            img.src = evt.target.result;
          }
          reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
          var sFilter = &#39;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="&#39;;
          file.select();
          var src = document.selection.createRange().text;
          p.innerHTML = "<img id=&#39;imghead&#39;></img>";
          var img = document.getElementById(&#39;imghead&#39;);
          img.filters.item(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = src;
          var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          p.innerHTML = "<p style=&#39;width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"&#39;></p>";
        }
      }
      //用于计算预览图片的大小
      function clacImgZoomParam(maxWidth, maxHeight, width, height){
        var param = {
          top: 0,
          left: 0,
          width: width,
          height: height
        };
        if (width > maxWidth || height > maxHeight) {
          rateWidth = width / maxWidth;
          rateHeight = height / maxHeight;
          if (rateWidth > rateHeight) {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
          }
          else {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
          }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
      }
    </script>
  </head>
  <body>
    <p id="preview" style="width:320px;height:240px;"></p><!--用来放预览图片的p-->
    <input type="file" onchange="previewImage(this,320,240)" accept="image/*" /><!--一旦用户选择了图片文件，则触发上方的previewImage函数-->
  </body>
</html>

Generieren Sie zunächst ein p mit id=imghead in der Vorschau, wo die Bildvorschau platziert wird.

Für den Nicht-IE-Teil kann HTML5 verwendet werden, um die vom Benutzer ausgewählte Datei direkt zu lesen. Die Größe des Vorschaubilds kann über die Funktion clacImgZoomParam(maxWidth, maxHeight, width, height) berechnet werden ), und dann kann die Größe des Vorschaubildes direkt berechnet werden. Dieses Bild wird im p mit id=imghead platziert. Wenn es sich um IE handelt, erhält das generierte p mit id=imghead den im Style-Tag festgelegten Filter, lädt die vom Benutzer ausgewählte Bilddatei über den Filter und verwendet dann die Funktion clacImgZoomParam, um sie zu finden Größe und get Nach der Größenänderung löschen Sie den gesamten Inhalt in der Vorschau, generieren offiziell den ihm zugewiesenen Bildfilter und fügen das p mit einer bestimmten Größe hinzu.

wird auch im Dateifeld verwendet. accept="image/*" Diese HTML5-Funktion wird verwendet, um Benutzer darauf zu beschränken, nur Bilddateien auszuwählen Senden des Formulars Manchmal sollte es über onSubmit beurteilt werden und gleichzeitig im Serverhintergrund beurteilt werden, um zu verhindern, dass Benutzer seltsame Dinge an den Server senden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die lokale Vorschaufunktion für JavaScript-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Implementieren Sie Deep Copy und Shallow Copy in JQueryNächster Artikel：Implementieren Sie Deep Copy und Shallow Copy in JQuery

In Verbindung stehende Artikel

Mehr sehen