2010年12月24日

浏览器预览本地图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <script>  
 var __userAgent = window.navigator.userAgent;  
 isIE = /msie\s+(.*?)\;/i.test(__userAgent);   
 isFF = !isIE&&/rv\:(.*?)\)\s+gecko\//i.test(__userAgent);  
 function imageChange() {  
     var file = document.getElementById('__file__');  
     var _fileurl = file.value;  
     if (typeof FileReader != 'undefined' && !!FileReader) {  
     //html5  
       var reader = new FileReader();   
           reader.readAsDataURL(file.files[0]);    
           reader.onload = preview;  
           reader.onerror = function(evt){console.log("load fail:[error="+evt.target.error.code+"]")};  
     } else {  
         if (isIE) {  
             var _version = getInternetExplorerVersion();  
             if (_version >= 7.0) {  
                 file.select();  
                   try{  
                   _fileurl = document.selection.createRange().text;  
                   if (!_fileurl || _fileurl == '') {  
                       _fileurl = file.value;  
                   }  
                   } finally { document.selection.empty(); }  
             }  
         }   
         if (isFF){  
             //不支持html5的低版本ff  
             _fileurl = file.files[0].getAsDataURL();  
         }  
           preview(_fileurl);  
     }  
 }  
 function preview(fileurl){  
     var img = document.getElementById('__image__');  
     if (typeof FileReader != 'undefined' && !!FileReader) {  
         fileurl = fileurl.target.result;  
     }   
     if (!isImage(fileurl)){  
         alert('请选择正确的图片文件!'); return;  
     }  
     img.src = fileurl;  
 }  
 function isImage(url) {  
     return /^data:image|\.(?:jpg|png|jpeg|gif|bmp)\s*$/i.test(url);  
 }  
 function getInternetExplorerVersion() {  
     var rv = -1; // Return value assumes failure.  
     if (navigator.appName == 'Microsoft Internet Explorer') {  
         var ua = navigator.userAgent;  
         var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");  
         if (re.exec(ua) != null)  
              rv = parseFloat( RegExp.$1 );  
     }  
     return rv;  
 };  
 </script>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 </head>  
 <body>  
 <input type="file" id="__file__" onchange="imageChange()" onpropertychange="imageChange()"/>  
 <div><img id="__image__" src=""></div>  
 </body>  
 </html>

不支持safari和opera。

在chrome中直接打开html文件不能加载图片,会报NOT_READABLE_ERR,必须通过服务器来访问。