本地图片预览(支持IE6，IE7，IE8， Firefox3)

日期：2010年01月12日分类：前端开发, 技术

最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3，不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

<html> <head> <script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> </head> <body> <input type="file" id="picture" name="picture" size="35" value="" onchange="setImg(this)"/> <div id="preview_fake" style="margin-left: 50px"> </div> <img id="preview_size_fake"/> <style type="text/css"> #preview_fake{ /* 该对象用于在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility:hidden; } </style> <script type="text/javascript"> function setImg(obj){ if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('图片格式无效！'); return false; } $("#preview_fake").empty(); var img = document.createElement("img"); img.setAttribute("src", ""); img.setAttribute("id", "preview"); document.getElementById("preview_fake").appendChild(img); if($.browser.msie){ if($.browser.version == 6.0){ $("#preview").attr("src",obj.value); }else{ var objPreview = document.getElementById('preview' ); var objPreviewFake = document.getElementById('preview_fake' ); var objPreviewSizeFake = document.getElementById('preview_size_fake' ); obj.select(); var imgSrc =document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight ); objPreview.style.display ='none'; } } if($.browser.mozilla){ $("#preview").attr("src",obj.files[0].getAsDataURL()); } if($.browser.opera){ alert("暂时不支持Opera浏览器"); } if($.browser.safari){ alert("暂时不支持Safari浏览器"); } } </script> </body> </html>

提示：你可以先修改部分代码再运行。

分享&收藏

Tags: Demo, Firefox, IE, web, 本地图片预览, 浏览器

这篇文章发布于 2010年01月12日 at 22:11 归类于前端开发, 技术。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论, 或者从您的站点 trackback。

从我们站点的访问情况看，chrome的比例比ff高