JS实现即时显示上传缩略图

javascript实现即时显示上传缩略图,记录在此,以备后用!

  1. <html> 
  2. <head> 
  3. <meta content="text/html; charset=utf-8" http-equiv=content-type> 
  4. <meta name=author content="Laruence(www.laruence.com)"> 
  5. <title>即时显示上传缩略图</title> 
  6. </head> 
  7. <body style="text-align:center;"> 
  8. <div> 
  9. <div style="width:200px; height:200px; border:1px solid #666;"><img id="img"  style="visibility:hidden;" height="100%" width="100%"></div> 
  10. <div style="margin-top:8px;"><input id="file" type="file" onChange="preivew(this,'img');"></div> 
  11. </div> 
  12. <script language="javascript" type="text/javascript"> 
  13. var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; 
  14. var preivew = function(file, container){ 
  15.     try{ 
  16.         var pic =  new Picture(file, document.getElementById(container)); 
  17.     }catch(e){ 
  18.         alert(e); 
  19.     } 
  20. //缩略图类定义 
  21. var Picture  = function(file, container){ 
  22.     var height = 0
  23.     widht  = 0
  24.     ext    = ''
  25.     size   = 0
  26.     name   = ''
  27.     path   =  ''
  28.     var self   = this
  29.     if(file){ 
  30.         name = file.value; 
  31.         if(window.navigator.userAgent.indexOf("MSIE")>=1){ 
  32.             file.select(); 
  33.             path = document.selection.createRange().text; 
  34.         }else if(window.navigator.userAgent.indexOf("Firefox")>=1){  
  35.             if(file.files){ 
  36.                 path =  file.files.item(0).getAsDataURL(); 
  37.             }else{ 
  38.                 path = file.value; 
  39.             } 
  40.         } 
  41.     }else{ 
  42.         throw '无效的文件'; 
  43.     } 
  44.     ext = name.substr(name.lastIndexOf("."), name.length); 
  45.     if(container.tagName.toLowerCase() != 'img'){ 
  46.         throw '不是一个有效的图片容器'; 
  47.         container.visibility = 'hidden'
  48.     } 
  49.     container.src = path
  50.     container.alt = name
  51.     container.style.visibility = 'visible'
  52.     height = container.height; 
  53.     widht  = container.widht; 
  54.     size   = container.fileSize; 
  55.     this.get = function(name){ 
  56.         return self[name]; 
  57.     } 
  58.     this.isValid = function(){ 
  59.         if(allowExt.indexOf(self.ext) !== -1){ 
  60.             throw '不允许上传该文件类型'; 
  61.             return false; 
  62.         } 
  63.     } 
  64. </script> 
  65. </body> 
  66. </html> 

转载请注明:代码家园 » JS实现即时显示上传缩略图

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 苍月
    2015-12-16 11:37:01发表

    现在已经不支持getAsDataURL()了