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

云淡风轻

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

 
 
 

日志

 
 

[javascript]图片预览  

2009-12-03 23:19:04|  分类: 格物致知 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
[javas<wbr>cript]图片预览 - 隐湖之鲤 - 云淡风轻
图片预览就是说在用户上传图片之前先看一下这张图片,以确定是否确实要上传它。这个功能其实很鸡肋。浏览器的选择文件的对话框里,完全就有图片预览的功能的。
通常有两种实现方式:本地预览和服务器预览。服务器预览是指把图片上传到服务器上再预览,本地预览则是用javascript读取文件显示出来。
先说服务器预览,实际上就是在用户选择完图片之后,悄悄地把图片上传到服务器上,然后再把图片传回来给用户看到。好处就是各个浏览器都能做到,劣势也非常明显,如果预览完图片后不想要了,带宽就浪费了。在中国这样的网络环境下,如果预览一张2、3M以上,甚至于10M的图片,那简直是杯具了。而且上传到服务器,这本身就和预览是矛盾的。
然后是本地预览。其实这才是预览的本意。但由于安全的原因,浏览器不允许javascript读取本地文件。不过对于图片,一些浏览器还是有解决办法的。
对于IE6,据说 <img src="C\abc.jpg"/>就可以了。
当然更有技术含量的代码如下,可以搞定IE和firefox:(代码是以前在网上看到后存下来的,不记得原来的出处在哪了)
html:
 <input id="file" type="file" />
<div id="preview">
<img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
 
javascript:
document.getElementById("file").onchange = function() {
    if ("Microsoft Internet Explorer" == navigator.appName) {
        var preview = document.getElementById("preview");
        preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;
        document.getElementById("image").style.display = "none";
    } else if ("Netscape" == navigator.appName){
        document.getElementById("image").src = this.files[0].getAsDataURL();
    } else {
        alert("Not Support!");
    }
}
google了一下,没有发现opera和webkit的解决办法。不过能解决IE和firefox已经能够满足80%以上的用户了吧。

另外一个方案是使用flash,不熟悉。flash的装机率据说有95%以上。

update: 经过若干人的浏览器测试,普遍发现,IE6可以使用,但IE7和IE8普遍不能使用,除了vonbo同学的Mac机器上的vbox上的XP的IE7可以使用。
  评论这张
 
阅读(927)| 评论(2)
推荐 转载

历史上的今天

评论

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

页脚

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