JS Local Image Preview code compatible with all browsers

　　

HTML code

<div id= "Divpreview" style= "width:160px; height:170px ">
</div> <asp:fileupload id=" Fuheadphoto "runat=" Server "onchange = "Previewimage (this, ' Imgheadphoto ', ' Divpreview ')" size= "/> will be on-line JS local image Preview integration, hope to be useful to everyone.

//JS Local image preview, compatible with ie[6-11], Firefox, chrome17+, opera11+, maxthon3+, 360 browser, Baidu browserfunction Previewimage (fileobj, Imgpreviewid, Divpreviewid) {varAllowextention = document.getElementById ("Hfallowpicsuffix"). Value;//. jpg,.bmp,.gif,.png, the suffix name that allows uploading files    varextention = fileObj.value.substring (FileObj.value.lastIndexOf (".") +1). toLowerCase ();//gets the extension of the current upload file    varBrowserversion =window.navigator.userAgent.toUpperCase (); if(Allowextention.indexof (extention) >-1) {        if(fileobj.files) {//compatible with Chrome, Firefox 7+, 360 browser 5.5+, etc., should also be compatible with IE10,HTML5 implementation Preview            if(window. FileReader) {varReader =NewFileReader (); Reader.onload=function (e) {document.getElementById (Imgpreviewid). SetAttribute ("src", E.target.result); } reader.readasdataurl (fileobj.files[0]); } Else if(Browserversion.indexof ("SAFARI") >-1) {alert ("image previews for the following versions of Safari 6.0 are not supported!"); } Else{alert ("picture preview of the browser you are currently using is not supported!"); }        } Else if(Browserversion.indexof ("MSIE") >-1) {//ie, 360 low version preview            if(Browserversion.indexof ("MSIE 6") >-1) {//IE6document.getElementById (Imgpreviewid). SetAttribute ("src", Fileobj.value); } Else{//Ie[7-9]Fileobj.Select(); if(Browserversion.indexof ("MSIE 9") >-1) {                    //Fileobj.blur ();//do not add Document.selection.createRange (). Text will be denied access in IE9document.getElementById (DIVPREVIEWID). focus ();//www.yiyaojing.com                }                varNewpreview = 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 +"')"; varTempdivpreview =document.getElementById (DIVPREVIEWID);                TempDivPreview.parentNode.insertBefore (Newpreview, Tempdivpreview); TempDivPreview.style.display="None"; }        } Else if(Browserversion.indexof ("FIREFOX") >-1) {//Firefox            varFirefoxversion = parsefloat (Browserversion.tolowercase (). Match (/firefox\/([\d.] +)/)[1]); if(Firefoxversion <7) {//firefox7 The following versionsdocument.getElementById (Imgpreviewid). SetAttribute ("src", fileobj.files[0].getasdataurl ()); } Else{//firefox7.0+document.getElementById (Imgpreviewid). SetAttribute ("src", window. Url.createobjecturl (fileobj.files[0])); }        } Else{alert ("picture preview of the browser you are currently using is not supported!"); }    } Else{alert ("only support"+ Allowextention +"a file for the suffix name!"); Fileobj.value="";//clear the selected file        if(Browserversion.indexof ("MSIE") >-1) {fileobj.Select();        Document.selection.clear (); } fileobj.outerhtml=fileobj.outerhtml; }}

Under IE9, if the file control receives the focus, Document.selection.createRange () denies access,

Therefore, just add a sentence of Fileimg.blur () to the Fileimg.select (). However, if the current page is embedded in the frame, after Fileimg.blur (), the original selected text in the file control will lose its selected state, so Fileimg.blur () cannot be used. You can have other elements on the current page, such as Div,button, get the focus, such as Div_view.focus (). Note that if it is a div, make sure that the DIV has at least 1 pixels high and wide before you get the focus. Currently tested in IE9, everything is OK. Above is I do you about my dating network and pharmaceutical fine network encountered problems, after finishing put here for users reference

JS Local Image Preview code compatible with all browsers