Picture preview feature before uploading JavaScript images

JS Code:

1 //JS Local image preview, compatible with ie[6-9], Firefox, chrome17+, opera11+, Maxthon32 functionpreviewimage (Fileobj, Imgpreviewid, Divpreviewid) {3     varAllowextention = ". Jpg,.bmp,.gif,.png";//allows the file to be uploaded with the suffix name document.getElementById ("Hfallowpicsuffix"). Value;4     varextention = fileObj.value.substring (FileObj.value.lastIndexOf (".") + 1). toLowerCase ();5     varBrowserversion =window.navigator.userAgent.toUpperCase ();6     if(Allowextention.indexof (extention) >-1) {7         if(fileobj.files) {//HTML5 Implementation Preview, compatible with Chrome, Firefox 7+, etc.8             if(window. FileReader) {9                 varReader =NewFileReader ();TenReader.onload =function(e) { Onedocument.getElementById (Imgpreviewid). SetAttribute ("src", E.target.result); A                 } -Reader.readasdataurl (fileobj.files[0]); -}Else if(Browserversion.indexof ("SAFARI") >-1) { theAlert ("Image Preview is not supported for Safari6.0 browsers below!")); -             } -}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 (); A                 if(Browserversion.indexof ("MSIE 9") >-1) { atFileobj.blur ();//do not add Document.selection.createRange (). Text will be denied access in IE9 -                 } -                 varNewpreview = document.getElementById (Divpreviewid + "New"); -                 if(Newpreview = =NULL) { -Newpreview = document.createelement ("div"); -Newpreview.setattribute ("id", Divpreviewid + "New"); inNewPreview.style.width = document.getElementById (imgpreviewid). Width + "px"; -NewPreview.style.height = document.getElementById (imgpreviewid). Height + "px"; toNewPreview.style.border = "Solid 1px #d2e2e2"; +                 } -document.getElementById ("Divfocus"). focus ();//Resolve Document.selection.createRange () denial of access issues theNewPreview.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' scale ', src= '" + Document.selection.createRange (). Text + "')";//Document.selection.createRange (). Text *                 varTempdivpreview =document.getElementById (DIVPREVIEWID); $ TempDivPreview.parentNode.insertBefore (Newpreview, tempdivpreview);Panax NotoginsengTempDivPreview.style.display = "None"; -  the             } +}Else if(Browserversion.indexof ("FIREFOX") >-1) {//Firefox A             varFirefoxversion = parsefloat (Browserversion.tolowercase (). Match (/firefox\/([\d.] +)/) [1]); the             if(Firefoxversion < 7) {//firefox7 The following versions +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); the         } -}Else {WuyiAlert ("Support only" + allowextention + "file with suffix name!")); theFileobj.value = "";//clear the selected file -         if(Browserversion.indexof ("MSIE") > 1) { Wu Fileobj.select (); - document.selection.clear (); About         } $fileobj.outerhtml =fileobj.outerhtml; -     } -}

Front page:

1 <Divstyle= "width:190px;"ID= "Divfocus">2      <Divrunat= "Server"ID= "Divpreview"class= "Divproimg">3          <imgID= "Tximg"class= "Tximg"runat= "Server"onclick= "UpClick ();"src=".. /skin/default/images/default/undefined1.png " />4      </Div>5      <Asp:fileuploadID= "Uploadimage"runat= "Server"onchange= "Previewimage (this, ' cphcontent_tximg ', ' Cphcontent_divpreview ')"6 CssClass= "Fuhide" />7      <inputrunat= "Server"ID= "Txtimg"type= "text"style= "Display:none" />8 </Div>

Problems encountered: IE8 and the following document.selection.createRange () denied access, causing the picture to not preview the issue

Reference: http://blog.csdn.net/yiluoak_47/article/details/7869154

Recently found that, under the IE9, the local picture preview of the company's Web site is not displayed properly, the test found that the reason is that IE9 under the file control can not get files path. The previous code is as follows: var strpic = fileimg.value;if ($.ie && $.browser.version > 6) {    fileimg.select ();    Strpic = Document.selection.createRange (). text;    Document.selection.empty ();} If Strpic is not empty, a filter preview is used. The above code in IE 6 7 8 is normal use, under IE9, Document.selection.createRange () denied access, it appears that security has improved. The final test found that, under IE9, if the file control gets the focus, Document.selection.createRange () denies access, so just add a fileimg.blur () after 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.

Solution: As above, although my is IE9 can normal use, ie78 not, but the focus has also solved the problem

Picture preview feature before uploading JavaScript images