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>

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

浏览过的版块