ie图片上传滤镜

《ie图片上传滤镜》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、word格式文档图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。例如ie7/ie8的滤镜预览法，firefox3的getAsDataURL方法。但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。【基本原理】图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。程序的file和img属性就是用来保存file控件和显示预览图

2、像的容器的，而img还必须是img元素。程序有以下几种预览方式：simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；domfile模式：调用file的getAsDataURL方法获取DataURI数据来显示预览，适用于ff3；remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。程序定义时就自动根据浏览器设置MODE属性：ImagePreview.MODE = $$B.ie7 

3、

4、 $$B.ie8 ?"filter"

5、?"domfile"

6、

7、 $$B.chrome 

8、

9、 $$B.safari ?"remote" : "simple";如果用能力检测会比较麻烦，所以只用了浏览器检测。由于浏览器对应的默认模式是不会变的，这个值会保存到函数属性中作为公用属性。【获取数据】调用preview方法，就会执行预览程序：if ( this.file &&false!==thisthis._preview( this在通过检测后，再调用_getData获取数据，并作为_preview的参数进入下一步。程序初始化时就会根据mode来设置_getData数据获取程序：this._getData =this._g

10、etDataFun(opt.mode);mode的默认值是ImagePreview.MODE，也可以在可选参数中自定义。由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。在_getDataFun里面，根据mode返回数据获取程序：代码switchcase"filter"returnthiscase"domfile"returnthiscase"remote"returnthiscase"simple"defaultreturnthis不同的模式有不同的数据获取程序：滤镜数据获取程序：this.file.select();tryreturn document.

11、selection.createRange().text;} finally { document.selection.empty(); }专业整理word格式文档一般用在ie7/8，在file控件select后再通过selection对象获得文件本地路径。此时file控件不能隐藏，否则不能被select，不过一般能选择文件就肯定能被select了。确实要隐藏也可以在获取数据之后再隐藏。domfile数据获取程序：returnthis.file.files[0].getAsDataURL();用getAsDataURL从file控件获取数据，这个方法暂时只有ff3支持。远程数据

12、获取程序：this._setUpload();this._upload &&this._upload.upload();用_upload上传文件对象把数据提交后台，根据返回的数据再显示。这个方法不属于本地预览，是没有办法中的办法。一般数据获取程序：最原始的方法，现在只有ie6还支持从file的value直接获取本地路径。获取数据后，作为_preview预览程序的参数，再进行处理：if ( !!data && data !==thisthis._data = data; this首先排除空值或相同值的情况，再执行_show程序进行显示预览，其中_data属性用来保存当前的图片数据

13、。图片使用DataURI数据时可能会设置一个很大的src值，在ie8获取很大的src值会出现“无效指针”的错误。使用_data属性保存这个值可以避免从src取值而触发这个错误。远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。【显示预览】程序初始化时就会根据mode来设置_show预览显示程序：this._show = opt.mode !=="filter"?this._simpleShow : this._filterShow;除了filter模式，都是