易截截图软件、单文件、免安装、纯绿色、仅160KB

【原创】JavaScript 图片预览效果

随着浏览器安全性的提高,要实现图片预览也越来越困难。
不过群众的智慧是无限的,网上也有很多变通或先进的方法来实现。
在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。

兼容:ie6/7/8, firefox 3.5.5
后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0



详细程序说明和效果预览请看这里

完整实例下载(asp.net版)

完整实例下载(asp版)
程序说明

【基本原理】

图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素。

程序有以下几种预览方式:
simple模式:直接从file的value获取图片路径来显示预览,适用于ie6;
filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8;
domfile模式:调用file的getAsDataURL方法获取Data URI数据来显示预览,适用于ff3;
remote模式:最后的办法,把file提交后台处理后返回图片数据来显示预览,全适用。

程序定义时就自动根据浏览器设置MODE属性:
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
  $$B.firefox ? "domfile" :
  $$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";

如果用能力检测会比较麻烦,所以只用了浏览器检测。
由于浏览器对应的默认模式是不会变的,这个值直接会保存到函数属性中作为公用属性。
ps:ie6也可以用filte


相关问答:

怎么用javascript控制gridview里的RadioButton

怎么用javascript控制gridview里的RadioButton
对 gridview  findcontrol ,找出RadioButton,
然后,对RadioButton ,的Attribute 增加 JS就可以了。


C# code:
for (int i = 0; i < gd ......

javascript中隐藏下拉列表框中的某一个选项

问题描述:有一个下拉列表框,内容如下:添加、删除、更新。有这三个选项。
用户A登录的时候有添加、删除、更新三个权限。
用户B登录的时候只有更新权限。
我想判断,假如 A登录所有选项都显示(是可见的)。
......

IE7浏览器下为何不能运行flash和Javascript?

我家电脑原来装的是IE7浏览器,但是最近我爸爸动了某个配置,导致IE7环境下不能运行flash和javascript,看sina或者其他新闻网站上都是一块一块空白,登陆twitter也不成功,报:由于不支持javascript,导致不能登陆。 ......

javascript如何调用asp.net带参数的函数

后台:
  protected void form_ini2(string id)
  {
  //处理代码
  }
前台:
 <script language="javascript">
 function DbClickEvent(a ......

关于鼠标右键的JAVASCRIPT与FIREFOX不兼容的问题

<script language="javascript">
function click() {
if (event.button==2) { //button==1为左键
alert('点击查看文章详细内容!')
}
}
document.onmousedown=click
</script>
以上 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号