【基本原理】
图片预览主要包括两个部分:从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模式。
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript 图片预览效果 [1] 下一页 JavaScript 图片预览效果 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|