Detailliertes Beispiel für die JS-Implementierung des Hochladens und Anzeigens von Bildern

In diesem Artikel wird hauptsächlich JS vorgestellt, um die Echtzeitvorschaufunktion hochgeladener Bilder zu realisieren. Es ist sehr gut und hat Referenzwert. Freunde, die es benötigen, können sich auf den Code beziehen.

Ich habe ihn im Internet gefunden vor einiger Zeit und einen Teil davon im Projekt geändert. Die ursprüngliche Blog-Adresse kann nicht gefunden werden, wenn der ursprüngliche Autor sie sieht, hinterlassen Sie eine Nachricht und sie wird so schnell wie möglich gelöscht.

//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
  function PreviewImage(fileObj) {
    //创建dom元素
    var pPreviewId = 'pPreview_' + fileObj.name;
    var imgPreviewId = 'imgHeadPhoto_' + fileObj.name;
    var html=&#39;<p id="&#39;+pPreviewId+&#39;">&#39;+
          &#39;<img id="&#39;+imgPreviewId+&#39;" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />&#39;+
         &#39;</p>&#39;;
    $(&#39;#&#39;+pPreviewId).remove();
    $(fileObj).after(html);
    //进行限制
    var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {  //格式正确
      if (fileObj.files) {  //HTML5实现预览，兼容chrome、火狐7+等
        if (window.FileReader) {
          var reader = new FileReader();
          reader.onload = function (e) {
            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
          }
          reader.readAsDataURL(fileObj.files[0]);
        } else if (browserVersion.indexOf("SAFARI") > -1) {
          $(&#39;#&#39;+pPreviewId).remove();
          alert("不支持Safari6.0以下浏览器的图片预览!");
        }
      } else if (browserVersion.indexOf("MSIE") > -1) {
        if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
          document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        } else {//ie[7-9]
          fileObj.select();
          if (browserVersion.indexOf("MSIE 9") > -1)
            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
          var newPreview = document.getElementById(pPreviewId + "New");
          if (newPreview == null) {
            newPreview = document.createElement("p");
            newPreview.setAttribute("id", pPreviewId + "New");
            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
            newPreview.style.border = "solid 1px #d2e2e2";
          }
          newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=&#39;scale&#39;,src=&#39;" + document.selection.createRange().text + "&#39;)";
          var temppPreview = document.getElementById(pPreviewId);
          temppPreview.parentNode.insertBefore(newPreview, temppPreview);
          temppPreview.style.display = "none";
        }
      } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
        var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
        if (firefoxVersion < 7) {//firefox7以下版本
          document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
        } else {//firefox7.0+          
          document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
        }
      } else {
        document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
      }
    } else {
      $(&#39;#&#39;+pPreviewId).remove();
      alert("仅支持" + allowExtention + "为后缀名的文件!");
      fileObj.value = ""; //清空选中文件
      if (browserVersion.indexOf("MSIE") > -1) {
        fileObj.select();
        document.selection.clear();
      }
      fileObj.outerHTML = fileObj.outerHTML;
    }
    return fileObj.value;  //返回路径
  }

【Verwandte Empfehlungen】

1 Javascript Kostenloses Video-Tutorial

2 >Ausführliche Erklärung des Plug-in-Codes zum Vergrößern und Verkleinern des mobilen Fingers

3

Detaillierte Erklärung des Bootstrap-Akkordeon-Falt-Tutorials

4.

Detaillierte Erläuterung der Bootstrap-Modal-Box-Remote-Instanz

5.

Detaillierte Code-Erklärung von AngularJS, das $http.post- und $http.get-Anfragen implementiert

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die JS-Implementierung des Hochladens und Anzeigens von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!