注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云淡风轻

云淡风轻近午天,傍花随柳过前川。

 
 
 

日志

 
 

[javascript]预览本地图片  

2010-09-20 17:41:02|  分类: 格物致知 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
随着chrome6变成了stable,预览本地图片现在可以支持IE6,7,8,Firefox,Chrome,只有safari暂时没办法。opera未测试。
代码如下:
   1:  (function(){
   2:      window.previewImage = function (fileInput, containerId){
   3:          // w3c
   4:          if (fileInput.files){
   5:              var fs = fileInput.files;
   6:              for (var i = 0, j = fs.length; i < j; i++){
   7:                  var file = fs[i];
   8:                  if (!/image.*/.test(file.type)){
   9:                      continue;
  10:                  }
  11:                  try {
  12:                      // firefox support this way
  13:                      displayImage(containerId, file.getAsDataURL());
  14:                  }
  15:                  catch (e){ 
  16:                      var reader = new FileReader();
  17:                      reader.onload = function(e){
  18:                          displayImage(containerId, e.target.result);
  19:                      }
  20:                      reader.readAsDataURL(file);
  21:                  }    
  22:              }    
  23:          }
  24:          // ie
  25:          else{
  26:              displayImage(containerId, fileInput.value);
  27:          }    
  28:      }    
  29:      function displayImage(containerId, dataURL){
  30:          var img = document.createElement('img');
  31:          img.src = dataURL;
  32:          container = document.getElementById(containerId);
  33:          container.appendChild(img);
  34:      }    
  35:  })();
用法:
<input type="file" name="upload_photo_file" onchange="previewImage(this, 'image-preview')"/>
<div id="image-preview" ></div>

  评论这张
 
阅读(670)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017