[p]图片上传预览是一种在图片上传之前对图片进行本地预览的技术。[br]使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。[br]但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。[br]不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。[br]例如ie7/ie8的滤镜预览法，firefox 3的getasdataurl方法。[br]但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。[br]在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。[br]上次写的[url=http://cnblogs.com/cloudgamer/archive/2009/12/01/quick_upload.html][color=#3366cc]简便无刷新文件上传系统[/color][/url]最初的目的就是用来实现这个图片预览效果的。[br]兼容：ie6/7/8, firefox 3.5.5[br]后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0[/p] [p][br][b]效果预览[/b][/p] .perview {width:600px;background:#fff; border-collapse:collapse;} .perview td, .perview th {padding:5px;border:1px solid #ccc;} .perview th {background-color:#f0f0f0; height:20px;} .perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00f;} .perview table{ width:100%;border-collapse:collapse;} 选择文件 预览图 [br] /*file样式*/ #idpicfile { width:80px;height:20px;overflow:hidden;position:relative; background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat; } #idpicfile input { font-size:20px;cursor:pointer; position:absolute;right:0;bottom:0; filter:alpha(opacity=0);opacity:0; outline:none;hide-focus:expression(this.hidefocus=true); } 选择图片： 文件路径 预览图 操作 [url=#]移除[/url] [url=#]移除[/url] [p][br]ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。[/p] [p][br][b]程序说明[/b][/p] [p][b]【基本原理】[/b][/p] [p]图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。[br]程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。[/p] [p]程序有以下几种预览方式：[br]simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；[br]filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；[br]domfile模式：调用file的getasdataurl方法获取data uri数据来显示预览，适用于ff3；[br]remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。[/p] [p]程序定义时就自动根据浏览器设置mode属性：[br][/p] [color=#000000]imagepreview.mode [/color][color=#000000]=[/color][color=#000000] $$b.ie7 [/color][color=#000000]||[/color][color=#000000] $$b.ie8 [/color][color=#000000]?[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]filter[/color][color=#000000]"[/color][color=#000000] :[br] $$b.firefox [/color][color=#000000]?[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]domfile[/color][color=#000000]"[/color][color=#000000] :[br] $$b.opera [/color][color=#000000]||[/color][color=#000000] $$b.chrome [/color][color=#000000]||[/color][color=#000000] $$b.safari [/color][color=#000000]?[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]remote[/color][color=#000000]"[/color][color=#000000] : [/color][color=#000000]"[/color][color=#000000]simple[/color][color=#000000]"[/color][color=#000000];[/color] [p][br]如果用能力检测会比较麻烦，所以只用了浏览器检测。[br]由于浏览器对应的默认模式是不会变的，这个值会保存到函数属性中作为公用属性。[br]ps：ie6也可以用filter模式，不过它有更好的simple模式。[/p] [p][br][b]【获取数据】[/b][/p] [p]调用preview方法，就会执行预览程序：[/p] [color=#0000ff]if[/color][color=#000000] ( [/color][color=#0000ff]this[/color][color=#000000].file [/color][color=#000000]&&[/color][color=#000000] [/color][color=#0000ff]false[/color][color=#000000] [/color][color=#000000]!==[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000].oncheck() ) {[br] [/color][color=#0000ff]this[/color][color=#000000]._preview( [/color][color=#0000ff]this[/color][color=#000000]._getdata() );[br]}[/color] [p][br]在通过检测后，再调用_getdata获取数据，并作为_preview的参数进入下一步。[/p] [p]程序初始化时就会根据mode来设置_getdata数据获取程序：[br][/p] [color=#0000ff]this[/color][color=#000000]._getdata [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._getdatafun(opt.mode);[/color] [p][br]mode的默认值是imagepreview.mode，也可以在可选参数中自定义。 [br]由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。[/p] [p]在_getdatafun里面，根据mode返回数据获取程序：[/p] [img]http://images.cnblogs.com/outliningindicators/contractedblock.gif[/img][img]http://images.cnblogs.com/outliningindicators/expandedblockstart.gif[/img]代码 [color=#0000ff]switch[/color][color=#000000] (mode) {[br] [/color][color=#0000ff]case[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]filter[/color][color=#000000]"[/color][color=#000000] :[br] [/color][color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._filterdata;[br] [/color][color=#0000ff]case[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]domfile[/color][color=#000000]"[/color][color=#000000] :[br] [/color][color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._domfiledata;[br] [/color][color=#0000ff]case[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]remote[/color][color=#000000]"[/color][color=#000000] :[br] [/color][color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._remotedata;[br] [/color][color=#0000ff]case[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]simple[/color][color=#000000]"[/color][color=#000000] :[br] [/color][color=#0000ff]default[/color][color=#000000] :[br] [/color][color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._simpledata;[br]}[/color] [p][br]不同的模式有不同的数据获取程序：[br]滤镜数据获取程序：[/p] [color=#0000ff]this[/color][color=#000000].file.select();[br][/color][color=#0000ff]try[/color][color=#000000]{[br] [/color][color=#0000ff]return[/color][color=#000000] document.selection.createrange().text;[br]} [/color][color=#0000ff]finally[/color][color=#000000] { document.selection.empty(); }[/color] [p]一般用在ie7/8，在file控件select后再通过selection对象获得文件本地路径。[br]此时file控件不能隐藏，否则不能被select，不过一般能选择文件就肯定能被select了。[br]确实要隐藏也可以在获取数据之后再隐藏。[/p] [p]domfile数据获取程序：[/p] [color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000].file.files[[/color][color=#000000]0[/color][color=#000000]].getasdataurl();[/color] [p]用getasdataurl从file控件获取数据，这个方法暂时只有ff3支持。[/p] [p]远程数据获取程序：[/p] [color=#0000ff]this[/color][color=#000000]._setupload();[br][/color][color=#0000ff]this[/color][color=#000000]._upload [/color][color=#000000]&&[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._upload.upload();[/color] [p]用_upload上传文件对象把数据提交后台，根据返回的数据再显示。[br]这个方法不属于本地预览，是没有办法中的办法。[/p] [p]一般数据获取程序：[/p] [color=#0000ff]return[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000].file.value;[/color] [p]最原始的方法，现在只有ie6还支持从file的value直接获取本地路径。[/p] [p]获取数据后，作为_preview预览程序的参数，再进行处理：[/p] [color=#0000ff]if[/color][color=#000000] ( [/color][color=#000000]!![/color][color=#000000]data [/color][color=#000000]&&[/color][color=#000000] data [/color][color=#000000]!==[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._data ) {[br] [/color][color=#0000ff]this[/color][color=#000000]._data [/color][color=#000000]=[/color][color=#000000] data; [/color][color=#0000ff]this[/color][color=#000000]._show();[br]}[/color] [p][br]首先排除空值或相同值的情况，再执行_show程序进行显示预览，其中_data属性用来保存当前的图片数据。[br]图片使用data uri数据时可能会设置一个很大的src值，在ie8获取很大的src值会出现“无效指针”的错误。[br]使用_data属性保存这个值可以避免从src取值而触发这个错误。[/p] [p]远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。[/p] [p][br][b]【显示预览】[/b][/p] [p]程序初始化时就会根据mode来设置_show预览显示程序：[/p] [color=#0000ff]this[/color][color=#000000]._show [/color][color=#000000]=[/color][color=#000000] opt.mode [/color][color=#000000]!==[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]filter[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]?[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._simpleshow : [/color][color=#0000ff]this[/color][color=#000000]._filtershow;[/color] [p][br]除了filter模式，都是使用_simpleshow显示程序来显示预览图片的。[br]里面会先调用_simplepreload方法设置一般预载图片对象：[/p] [img]http://images.cnblogs.com/outliningindicators/contractedblock.gif[/img][img]http://images.cnblogs.com/outliningindicators/expandedblockstart.gif[/img]代码 [color=#0000ff]if[/color][color=#000000] ( [/color][color=#000000]![/color][color=#0000ff]this[/color][color=#000000]._preload ) {[br] [/color][color=#0000ff]var[/color][color=#000000] preload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._preload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]new[/color][color=#000000] image(), othis [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000],[br] onload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]function[/color][color=#000000](){ othis._imgshow( othis._data, [/color][color=#0000ff]this[/color][color=#000000].width, [/color][color=#0000ff]this[/color][color=#000000].height ); };[br] [/color][color=#0000ff]this[/color][color=#000000]._onload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]function[/color][color=#000000](){ [/color][color=#0000ff]this[/color][color=#000000].onload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]null[/color][color=#000000]; onload.call([/color][color=#0000ff]this[/color][color=#000000]); }[br] preload.onload [/color][color=#000000]=[/color][color=#000000] $$b.ie [/color][color=#000000]?[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._onload : onload;[br] preload.onerror [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]function[/color][color=#000000](){ othis._error(); };[br]} [/color][color=#0000ff]else[/color][color=#000000] [/color][color=#0000ff]if[/color][color=#000000] ( $$b.ie ) {[br] [/color][color=#0000ff]this[/color][color=#000000]._preload.onload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000]._onload;[br]}[/color] [p][br]预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。[br]要实现这些功能使用image对象就足够了。[br]在onload中执行_imgshow显示预览，在onerror中进行出错处理。[br]ps：ff、chrome和safari的图片对象还有naturalheight和naturalwidth属性可以获取图片的原始尺寸，即使图片尺寸已经修改过。 [/p] [p]这里要注意ie6/7的gif图片载入bug，测试以下代码：[br][/p] [img]http://images.cnblogs.com/outliningindicators/contractedblock.gif[/img][img]http://images.cnblogs.com/outliningindicators/expandedblockstart.gif[/img]代码 [color=#000000]<[/color][color=#000000]body[/color][color=#000000]><[/color][color=#000000]img id[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]img[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]/[/color][color=#000000]>