Firefox7来了，你的上传图片及时预览功能还能Hold住吗？

以前在网上找的图片上传及时预览的功能，在firefox下测试竟然不好用了，原来是因为我的firefox升级为7的原因。

Firefox7有哪些变动呢？

　　请看这里http://www.20ju.com/content/V171713.htm

及时预览图片的功能代码：

http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html
http://www.cnblogs.com/benz/archive/2009/12/19/1627601.html

实现该功能的主要的思路是：

1.对于IE浏览器，你要使用滤镜的方法处理　 objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;

2.对于firefox，７之前的版本是objPreviewImg.src = obj.files[0].getAsDataURL();

7之后的版本要这样处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>  
    <head>  
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
    <title>Image preview example</title>  
    <script type="text/javascript">  
    oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i;  
      
    oFReader.onload = function (oFREvent) {  
      document.getElementById("uploadPreview").src = oFREvent.target.result;  
    };  
      
    function loadImageFile() {  
      if (document.getElementById("uploadImage").files.length === 0) { return; }  
      var oFile = document.getElementById("uploadImage").files[0];  
      if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }  
      oFReader.readAsDataURL(oFile);  
    }  
    </script>  
    </head>  
      
    <body onload="loadImageFile();">  
    <form name="uploadForm">  
    <table>  
    <tbody>  
    <tr>  
    <td><img  /></td>  
    <td><input  /></td>  
    </tr>  
    </tbody>  
    </table>  
    <p><input type="submit" value="Send" /></p>  
    </form>  
    </body>  
    </html>

具体可以参考：https://developer.mozilla.org/en/DOM/FileReader

https://developer.mozilla.org/en/DOM/File

本文为作者原创，转载请注明出处，谢谢