图片上传滤镜.pdf

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。 例如 ie7/ie8 的滤镜预览法， firefox 3 的 getAsDataURL 方法。 但在 opera 、safari 和 chrome 还是没有办法实现本地预览，只能通过后台来支持预览。 【基本原理】 图片预览主要包括两个部分：从 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?domfile|| $$B.chrome || $$B.safari ?remote : simple; 如果用能力检测会比较麻烦，所以只用了浏览器检测。 由于浏览器对应的默认模式是不会变的，这个值会保存到函数属性中作为公用属性。 【获取数据】 调用 preview 方法，就会执行预览程序： if ( this.file false!==thisthis._preview( this 在通过检测后，再调用 _getData 获取数据，并作为 _preview 的参数进入下一步。 程序初始化时就会根据 mode 来设置 _getData 数据获取程序： this._getData =this._getDataFun(opt.mode); mode 的默认值是 ImagePreview.MODE ，也可以在可选参数中自定义。 由于兼容性问题，一般应保留默认值，除非是使用全兼容的 remote 模式。 在_getDataFun 里面，根据 mode 返回数据获取程序： 代码 switchcasefilterreturnthiscasedomfilereturnthiscaseremotereturnthiscasesimpledefaultreturnthis 不同的模式有不同的数据获取程序： 滤镜数据获取程序： this.file.select(); tryreturn document.selection.createRange().text; } finally { document.selection.empty(); } 一般用在 ie7/8 ，在 file 控件 select 后再通过 selection 对象获得文件本地路径。 此时 file 控件不能隐藏，否则不能被 select ，不过一般能选择文件就肯定能被 select 了。 确实要隐藏也可以在获取数据之后再隐藏。 domfile 数据获取程序： returnthis.file.files[0].getAsDataURL(); 用 getAsDataURL 从 file 控件获取数据，这个方法暂时只有 ff3 支持。 远程数据获取程序： this._setUpload(); this._upload this._upload.upload(); 用_upload 上传文件对象把数据提交后台，根据返回的数据再显示。 这个方法不属于本地预览，是没有办法中的办法。 一般数据获取程序： 最原始的方法，现在只有 ie6 还支持从 file 的 value 直接获取本地路径。 获取数据后，作为 _preview 预览程序的参数，再