ie图片上传滤镜资料

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。不过群众的智慧

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。 ie7/ie8firefox 3getAsDataURL 例如的滤镜预览法，的方法。 operasafarichrome 但在、和还是没有办法实现本地预览，只能通过后台来支持预览。 【基本原理】 file 图片预览主要包括两个部分：从表单控件获取图像数据，根据数据显示预览图像。 fileimgfileimgimg 程序的和属性就是用来保存控件和显示预览图像的容器的，而还必须是元素。 程序有以下几种预览方式： simplefilevalueie6 模式：直接从的获取图片路径来显示预览，适用于； filterselectionfileie7/8 模式：通过获取的图片路径，再用滤镜来显示预览，适用于； domfilefilegetAsDataURLData URIff3 模式：调用的方法获取数据来显示预览，适用于； remotefile 模式：最后的办法，把提交后台处理后返回图片数据来显示预览，全适用。 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); modeImagePreview.MODE 的默认值是，也可以在可选参数中自定义。 remote 由于兼容性问题，一般应保留默认值，除非是使用全兼容的模式。 _getDataFunmode 在里面，根据返回数据获取程序： 代码 switchcase"filter"returnthiscase"domfile"returnthiscase"remote"returnthiscase"simple"defaultreturnthis 不同的模式有不同的数据获取程序： 滤镜数据获取程序： this.file.select(); tryreturn document.selection.createRange().text; }finally {document.selection.empty(); }