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也可以用filter模式,不过它有更好的simple模式。
【获取数据】
调用preview方法,就会执行预览程序:
if ( this.file && false !== this.onCheck() ) {
this._preview( this._getData() );
}
在通过检测后,再调用_getData获取数据,并作为_preview的参数进入预览下一步。
程序初始化时就会根据mode来设置_getData数据获取程序:
this._getData = this._getDataFun(opt.mode);
mode的默认值是ImagePreview.MODE,也可以在可选参数中自定义。
由于兼容性问题,一般应保留默认值,除非是使用全兼容的remote模式。
在_getDataFun里面,根据mode返回数据获取程序:
switch (mode) {
case "filter" :
return this._filterData;
case "domfile" :
&
相关文档:
javascript内存泄露的问题一直以来都不受到大家的重视,原因是对用户的影响没有太实际的表现,或许近几年内存发展迅速。脚本内存再泄露也不会有太大影响。
当然作为前端开发的同学们,就不能有这样的侥幸心理。出现memory leaks很大程度上是因为程序的不成熟和编码不太规范造成的。不过,这里就不说如何出现问题的,对问题 ......
/*
由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素
可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了.
并且在这点上说javascript作为一种脚本语言不同于那种严格的面向对象的c++.c#,java了.具有更高的灵活性.
&n ......
/*
-------------- 函数检索 --------------
trim函数: trim() lTrim() rTrim()
校验字符串是否为空: &n ......
function
clone(jsonObj) {
var
buf;
if
(jsonObj
instanceof
Array) {
buf = [];
......