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

以前在网上找的图片上传及时预览的功能，在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 id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>  
 
        <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>  
 
        </tr>  
 
        </tbody>  
 
        </table>  
 
        <p><input type="submit" value="Send" /></p>  
 
        </form>  
 
        </body>  
 
        </html>