谁有FF和IE7下都可以正常使用的JS上传图片预览代码？

FF果然是可以用的，不过在IE7下面还是不行。

解决方案 »

  1.   


    <script>
    function preview(imgFile,num)
    {  
        //预览代码，支持 IE6、IE7。
        var newPreview = document.getElementById("preview1");
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.style.width = "108px";
        newPreview.style.height = "130px";
    newPreview.style.display = "block";
    }</script>
    <input type="file" onchange='ShowImg(this)' /><img id="idImg" style="display:none;" /><div id="preview1" style="border:1px solid #FFCC00; width:108px; height:130px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); display:none" onclick="picdelete(this,1)"></div>
    <script>function ShowImg(o){    
    var Browser_Agent=navigator.userAgent;
    if(Browser_Agent.indexOf("Firefox")!=-1){
    //火狐使用
      document.getElementById("idImg").src = o.files[0].getAsDataURL();    document.getElementById("idImg").style.display = "block";

    }
    else{
    preview(o,1);
    }
    }</script>
      

  2.   

    IE下的，我目前是IE8下没问题，估计在IE7和IE6下就更没问题了，上面已经有达人提供了FF下的，楼主自行写个if判断，整合就OK了<?xml version="1.0" encoding="gb2312"?>
    <!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"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>本地图片预览代码（支持 IE6、IE7）</title>
    <style type="text/css">
    #newPreview
    {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
    </style>
    <script type="text/javascript" language="javascript">
    <!--
    function PreviewImg(imgFile)
    {
        //原来的预览代码，不支持 IE7。
        var oldPreview = document.getElementById("oldPreview");
        oldPreview.innerHTML = "<img src=\"file:\\\\" + imgFile.value + "\" width=\"80\" height=\"60\" />";
        
        //新的预览代码，支持 IE6、IE7。
        var newPreview = document.getElementById("newPreview");
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.style.width = "80px";
        newPreview.style.height = "60px";
    }
    -->
    </script>
    </head><body><p>说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。</p><hr /><p>如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。</p>
    <div id="oldPreview"></div><hr /><p>不论您使用的是 IE6 还是 IE7，均可以看到以下预览。</p>
    <div id="newPreview"></div><hr /><p>请选择一个图片进行预览：<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p></body></html>
      

  3.   

    我来给大家更简洁的方法
    <HTML>
    <META http-equiv=Content-Type content="text/html; charset=utf-8"> 
    <HEAD>
    <TITLE> Test Page </TITLE>
     
    </HEAD><BODY>
    <script>
    function preview(imgFile,num)
    {  
        //预览代码，支持 IE6、IE7。
        var newPreview = document.getElementById("preview1");
         
        var t ;
        if(document.all) //IE
        t = imgFile.value;
        else
        t = imgFile.files[0].getAsDataURL(); //FF
        newPreview.style.backgroundImage = "url(" + t + ")";//imgFile.value;
        newPreview.style.width = "108px";
        newPreview.style.height = "130px";
        newPreview.style.display = "block";
    }</script>
    <input type="file" onchange='ShowImg(this)' /><div id="preview1" style="border:1px solid #FFCC00; width:108px; height:130px;display:block" ></div>
    <script>function ShowImg(o)
    {    
    //var Browser_Agent=navigator.userAgent;
    //if(Browser_Agent.indexOf("Firefox")!=-1)
    //{
    //火狐使用
       //  document.getElementById("idImg").src=o.files[0].getAsDataURL();
       //  document.getElementById("idImg").style.display = "block";            
       // }
      //else
      //{
           preview(o,1);
        //}
    }</script>
    </BODY>
    </HTML>