Javascript allows you to preview uploaded images in real time. JS allows you to preview uploaded images in real time.

Javascript allows you to preview uploaded images in real time. JS allows you to preview uploaded images in real time.

Some of the code found on the network some time ago was modified and used in the project. The original blog address cannot be found. If the original author sees the address, I will delete it immediately.

// Js local image preview, compatible with ie [6-9], Firefox, Chrome17 +, Opera11 +, Maxthon3 function PreviewImage (fileObj) {// create the dom element var divPreviewId = 'divpreview _ '+ fileObj. name; var imgPreviewId = 'imgheadphoto _ '+ fileObj. name; var html = '<div id = "' + divPreviewId + '">' + ' '+' </div> '; $ (' # '+ divPreviewId ). remove (); $ (file Obj ). after (html); // restrict var allowExtention = ".jpg,.bmp, .gif, .png"; // The suffix document of the file that can be uploaded. getElementById ("hfAllowPicSuffix "). value; var extention = fileObj. value. substring (fileObj. value. lastIndexOf (". ") + 1 ). toLowerCase (); var browserVersion = window. navigator. userAgent. toUpperCase (); if (allowExtention. indexOf (extention)>-1) {// The format is correct if (fileObj. files) {// HTML5 achieves preview, compatible with chrome, Firefox 7 + and other if (window. fi LeReader) {var reader = new FileReader (); reader. onload = function (e) {document. getElementById (imgPreviewId ). setAttribute ("src", e.tar get. result);} reader. readAsDataURL (fileObj. files [0]);} else if (browserVersion. indexOf ("SAFARI")>-1) {$ ('#' + divPreviewId ). remove (); alert ("image preview is not supported in browsers below 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 (); // does not contain document. selection. createRange (). text in ie9 will reject access to var newPreview = document. getElementById (divPreviewId + "New"); if (newPre View = 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 (sizi NgMethod = '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) {// document of versions earlier than firefox7. 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 ("only supported" + allow Extention + "file with extension name! "); FileObj. value = ""; // clear the selected file if (browserVersion. indexOf ("MSIE")>-1) {fileObj. select (); document. selection. clear ();} fileObj. outerHTML = fileObj. outerHTML;} return fileObj. value; // return path}

The above section describes how to use JavaScript to preview uploaded images in real time. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!