JS Local Image Preview compatible with ie[6-9], Firefox, Chrome, Opera, Maxthon3, 360 browser

HTML code:

<DivID= "Divpreview">     <imgID= "Imgheadphoto"src= "Images/headphoto/noperson.jpg"style= "width:160px; height:170px;border:solid 1px #d2e2e2;"alt="" /></Div><Asp:fileuploadID= "Fuheadphoto"runat= "Server"onchange= "Previewimage (this, ' Imgheadphoto ', ' Divpreview ')"size= " the" />

will be online JS local image Preview integration, I hope to be useful to you, if there are other browsers are incompatible and there are solutions, please leave me a message, I will update the code in time.

JavaScript code:

//JS Local image preview, compatible with ie[6-9], Firefox, chrome17+, opera11+, Maxthon3, 360 browserfunctionpreviewimage (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 ("Does not support picture previews of the browsers you are currently using!"); }        } 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 ();//Reference http://gallop-liu.iteye.com/blog/1344778                }                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 ("Does not support picture previews of the browsers you are currently using!"); }    } Else{alert ("only supports" + allowextention + "file with suffix name!"); Fileobj.value= "";//clear the selected file        if(Browserversion.indexof ("MSIE") > 1) {fileobj.select ();        Document.selection.clear (); } fileobj.outerhtml=fileobj.outerhtml; }}

Test code download test code JS not updated, when testing the page JS copied to the test code inside

2013-7-2
1. Update the original NewPreview.style.width =document.getelementbyid (IMGPREVIEWID). Style.width for document.getElementById ( IMGPREVIEWID). width+ "px";

2013-7-4

1. Update compatible IE9 browser, 360 browser compatible 5.5+

2014-4-11

1. After uploading to the server, the IE9 is still a denial of access issue in special cases.

Fileobj.blur (); modified to document.getElementById (DIVPREVIEWID). focus ();

Forwarded from: http://www.cnblogs.com/slyzly/articles/2411940.html