Detailed example of JS implementation of uploading images and previewing them

This article mainly introduces the real-time preview function of uploaded images using JS. It is very good and has reference value. Friends who need it can refer to the code that I found on the Internet some time ago and modified part of it. in the project. The original blog address cannot be found. If the original author sees it, leave a message and it will be deleted as soon as possible.

//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;  //返回路径
  }

【Related recommendations】

1.

Javascript Free Video Tutorial

2.

Mobile Detailed explanation of the finger zoom-in and zoom-out plug-in code

3.

Bootstrap accordion folding tutorial detailed explanation

4.

Bootstrap modal box remote instance detailed explanation

5.

Detailed code explanation of angularJS implementation of $http.post and $http.get requests

The above is the detailed content of Detailed example of JS implementation of uploading images and previewing them. For more information, please follow other related articles on the PHP Chinese website!