ASP.NET预览本地图片（不用上传到服务器）

转：在浏览器里预览本地图片，正常情况下，firefox ,chrome 可以直接预览 本地图片 img.src ,单IE 里不行，因为img.src没有读取本地文件的权限。之前想过用 video、flash 控件等，现在发现一个好东西 ，IE 下 的滤镜也可以。不知道微软是怎么想的，img.src 读取不了 ，filter可以 。本身是是在网上找的 。

本文仅作个人收藏以便日后查阅，如有侵权请联系本人删除！

js代码：

function PreviewImage(fileObj,imgPreviewId,divPreviewId){ 

    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){ 

                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{ 

        alert("仅支持"+allowExtention+"为后缀名的文件!"); 

        fileObj.value="";//清空选中文件 

        if(browserVersion.indexOf("MSIE")>-1){                         

            fileObj.select(); 

            document.selection.clear(); 

        }                 

        fileObj.outerHTML=fileObj.outerHTML; 

    } 

}

<input type="file" name="file"   onchange="PreviewImage(this,'imgHeadPhoto','divPreview')"  />  <font color="red"> 图片大小为40＊40</font> <br/>

            <div id="divPreview">

                         <img id="imgHeadPhoto"  width="200"  height="200" src="/admin/upload/">

            </div>