兼容IE6,IE7,IE8和Firefox的图片上传预览效果

最新推荐文章于 2021-06-04 13:24:02 发布

renxingxingge

最新推荐文章于 2021-06-04 13:24:02 发布

阅读量4.2k

点赞数

文章标签： ie firefox image javascript filter function

本文链接：https://blog.csdn.net/renxingxingge/article/details/5856424

版权

所谓图片上传预览，就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果，关于这个效果我一直认为是无法做到的，没想到前不久被zhuozi搞定了。

网上流传的一些关于图片上传预览的代码都是差不多的，IE6下使用文件选择对象的value属性取出将要上传的本地文件路径，然后使用本地路径构造img标签，代码如下：

<input type="file" onchange="document.getElementById('view').innerHTML=' <img src=/'' + this.value + '/'/>';" /> <div id="view"> </div>

网上有些人说上面的代码可以在IE7下生效，但实际测试是不行的，因为IE7的img标签不支持本地路径，所以需要使用div和css的filter来实现这个效果，代码如下：

<input type="file" onchange=‘javascript: document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;’ /><br /> <div id="pic" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:400px;height:200px;"></div>

而关于Firefox的图片上传预览效果，网上几乎找不到相关资料，比较容易想到的解决方案无非是自动将图片上传到服务器再显示出来诸如此类，但这里我们不对此类技术进行讨论，我们要做的是正宗的上传前本地预览。

以下是最后的研究结果，同时兼容IE6,IE7,IE8和Firefox。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> var picPath; var image; // preview picture function preview() { document.getElementById('preview').style.display = 'none'; // 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片 document.getElementById('box').innerHTML = "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>"; } // show view button function buttonShow() { /* 这里用来解决图片加载延时造成的预览失败. 简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮. 这里我仍然有一个困惑，在IE7下预览效果偶尔会失效. */ if ( image.width == 0 || image.height == 0 ) { setTimeout(buttonShow, 1000); } else { document.getElementById('preview').style.display = 'block'; } } function loadImage(ele) { picPath = getPath(ele); image = new Image(); image.src = picPath; setTimeout(buttonShow, 1000); } function getPath(obj) { if(obj) { //ie if (window.navigator.userAgent.indexOf("MSIE")>=1) { obj.select(); // IE下取得图片的本地路径 return document.selection.createRange().text; } //firefox else if(window.navigator.userAgent.indexOf("Firefox")>=1) { if(obj.files) { // Firefox下取得的是图片的数据 return obj.files.item(0).getAsDataURL(); } return obj.value; } return obj.value; } } </script> </head> <body> <input type="file" name="pic" id="pic" onchange='loadImage(this)' /> <input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'> <div id='box'></div> </body> </html>