JavaScript 图片上传预览效果
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
[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]> <[/color][color=#000000]/[/color][color=#000000]div[/color][color=#000000]><[/color][color=#000000]/[/color][color=#000000]body>[/color][color=#000000][br][/color][color=#000000]<[/color][color=#000000]script[/color][color=#000000]>[/color][color=#000000][br]img.onload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]function[/color][color=#000000](){ div.innerhtml [/color][color=#000000]+=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000].complete [/color][color=#000000]+[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000], [/color][color=#000000]"[/color][color=#000000]; };[br]img.src [/color][color=#000000]=[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]http://tuan.pcpop.com/image/my/loading.gif[/color][color=#000000]"[/color][color=#000000];[br][/color][color=#000000]<[/color][color=#000000]/[/color][color=#000000]script>[/color]
[p][br]一般图片执行一次onload后并不会重复执行，但ie6/7的gif每次循环播放都会执行一次onload。[br]ps：ie8在非标准（怪辟）模式下也有相同的问题。[br]可以在onload的时候，判断complete是否为false来判断是否重复加载。[br]ps：除了ie，其他浏览器在onload时complete就已经为true了。[br]问题是选择另一个图片时这个complete仍然是true，这样就没有意义了。[br]所以只好在onload里面重置onload为null，并在每次选择文件重设onload了。[/p] [p]然后设置_preload的src预载图片，如果成功预载就会执行_imgshow显示预览。[br]要注意src的设置要在onload/onerror的设置之后，否则设置之前就加载完成的话就触发不了事件了。[/p] [p]_imgshow需要三个参数，包括要预览图片的src值，图片原始宽度和图片原始高度。[br]在_imgshow里面首先设置预览图片的尺寸：[br][/p] [img]http://images.cnblogs.com/outliningindicators/contractedblock.gif[/img][img]http://images.cnblogs.com/outliningindicators/expandedblockstart.gif[/img]代码 [color=#0000ff]var[/color][color=#000000] img [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000].img, style [/color][color=#000000]=[/color][color=#000000] img.style,[br] ratio [/color][color=#000000]=[/color][color=#000000] math.max( [/color][color=#000000]0[/color][color=#000000], [/color][color=#0000ff]this[/color][color=#000000].ratio ) [/color][color=#000000]||[/color][color=#000000] math.min( [/color][color=#000000]1[/color][color=#000000],[br] math.max( [/color][color=#000000]0[/color][color=#000000], [/color][color=#0000ff]this[/color][color=#000000].maxwidth ) [/color][color=#000000]/[/color][color=#000000] width [/color][color=#000000]||[/color][color=#000000] [/color][color=#000000]1[/color][color=#000000],[br] math.max( [/color][color=#000000]0[/color][color=#000000], [/color][color=#0000ff]this[/color][color=#000000].maxheight ) [/color][color=#000000]/[/color][color=#000000] height [/color][color=#000000]||[/color][color=#000000] [/color][color=#000000]1[/color][color=#000000][br] );[br] [br]style.width [/color][color=#000000]=[/color][color=#000000] math.round( width [/color][color=#000000]*[/color][color=#000000] ratio ) [/color][color=#000000]+[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]px[/color][color=#000000]"[/color][color=#000000];[br]style.height [/color][color=#000000]=[/color][color=#000000] math.round( height [/color][color=#000000]*[/color][color=#000000] ratio ) [/color][color=#000000]+[/color][color=#000000] [/color][color=#000000]"[/color][color=#000000]px[/color][color=#000000]"[/color][color=#000000];[/color] [p][br]这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。[br]自动计算首先要确保maxwidth最大宽度和maxheight最大高度大于等于0。[br]然后分别跟原始宽高做“/”运算得到比例，如果比例为0表示不限制，那么比例就自动改为1。[br]最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。[br]当然比例的计算可以根据需要自行修改。[br]ps：style的优先级比属性(width/height)高，所以要用style设置。[/p] [p]最后设置img的src就可以实现预览了。[/p] [p][br][b]【remote模式】[/b][/p] [p]remote模式会先提交file控件到后台，通过返回的数据来显示图片。[br]它跟其他模式最大的区别就是获取数据的部分。[/p] [p]在_remotedata远程数据获取程序中，会调用_setupload来设置上传文件对象。[br]如果设置了action，并存在quickupload函数，就会实例化一个上传文件对象保存到_upload中：[/p] [img]http://images.cnblogs.com/outliningindicators/contractedblock.gif[/img][img]http://images.cnblogs.com/outliningindicators/expandedblockstart.gif[/img]代码 [color=#0000ff]var[/color][color=#000000] othis [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]this[/color][color=#000000];[br][/color][color=#0000ff]this[/color][color=#000000]._upload [/color][color=#000000]=[/color][color=#000000] [/color][color=#0000ff]new[/color][color=#000000] quickupload([/color][color=#0000ff]this[/color][color=#000000].file, {[br] onready: [/color][color=#0000ff]function[/color][color=#000000](){[br] [/color][color=#0000ff]this[/color][color=#000000].action [/color] 该文章在 2010/5/1 2:56:21 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
