JavaScript教程:详细解析网页图片预览效果(2)

【基本原理】

图片预览主要包括两个部分：从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模式。