JS如何实现上传图片实时预览功能

这篇文章主要为大家展示了“JS如何实现上传图片实时预览功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现上传图片实时预览功能”这篇文章吧。

前段时间在网络上找的代码，修改了一部分用在了项目里。原博客地址找不到了，如果原作者看到的话留言我，将于第一时间删除。

//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3   function PreviewImage(fileObj) {     //创建dom元素     var divPreviewId = 'divPreview_' + fileObj.name;     var imgPreviewId = 'imgHeadPhoto_' + fileObj.name;     var html='<div id="'+divPreviewId+'">'+           '<img id="'+imgPreviewId+'" src="images/moren.jpg"  />'+          '</div>';     $('#'+divPreviewId).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) {           $('#'+divPreviewId).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(divPreviewId + "New");           if (newPreview == null) {             newPreview = document.createElement("div");             newPreview.setAttribute("id", divPreviewId + "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='scale',src='" + document.selection.createRange().text + "')";           var tempDivPreview = document.getElementById(divPreviewId);           tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);           tempDivPreview.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 {       $('#'+divPreviewId).remove();       alert("仅支持" + allowExtention + "为后缀名的文件!");       fileObj.value = ""; //清空选中文件       if (browserVersion.indexOf("MSIE") > -1) {         fileObj.select();         document.selection.clear();       }       fileObj.outerHTML = fileObj.outerHTML;     }     return fileObj.value;  //返回路径   }

以上是“JS如何实现上传图片实时预览功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！