none
IE下aspx页面中图片无法即时预览 RRS feed

  • 问题

  • 图片预览在FF中可以正常显示,在IE7中不可以~~~其他版本IE不晓得~~~大虾们!!help!!thanks~~

    实现思路:用js定义一个image=new image,给image.src赋值,用image.width判断是否为0,如果为0则不显示,如果不为0,则显示图片。FF可以,IE不行~~

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test1.aspx.cs" Inherits="test1" %>
    <%@ Register Src="ascx/head.ascx" TagName="head" TagPrefix="uc1" %>
    <!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 runat="server">
    
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>预览</title>
    
    <script language="javascript" type="text/javascript">
    var picPath;
    var image;
    function g(o){return document.getElementById(o);}
    function buttonShow()
    {
     if (image.width == 0 || image.height == 0 ) 
     {
     
     setTimeout(buttonShow, 1000);
     } 
     else 
     {
     
     g('word').style.display = 'none';
     if(g('box1').innerHTML=="")
     {
      if(image.width>image.height)
      g('box1').innerHTML= "<img width='80px' src='"+picPath+"'>";
      else
      g('box1').innerHTML= "<img height='80px' src='"+picPath+"'>";
     }
     else
     {
      if(g('box2').innerHTML=="")
      {
      if(image.width>image.height)
      g('box2').innerHTML= "<img width='80px' src='"+picPath+"'>";
      else
      g('box2').innerHTML= "<img height='80px' src='"+picPath+"'>";
      }
      else
      {
      if(g('box3').innerHTML=="")
      {
      if(image.width>image.height)
       g('box3').innerHTML= "<img width='80px' 
    
    src='"+picPath+"'>";
      else
       g('box3').innerHTML= "<img height='80px' 
    
    src='"+picPath+"'>";
      }
      else
      {
       if(g('box4').innerHTML=="")
       {
       if(image.width>image.height)
       g('box4').innerHTML= "<img width='80px' 
    
    src='"+picPath+"'>";
       else
       g('box4').innerHTML= "<img height='80px' 
    
    src='"+picPath+"'>";
       }
       else
       {
       alert("上传图片已达上限!");
       }
       }
      }
      }
     }
    }
    function loadImage(ele) {
    picPath  = getPath(ele);
    
    var fileext=g('pic').value.substring(g('pic').value.lastIndexOf("."),g('pic').value.length)
           fileext=fileext.toLowerCase();
        
           if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&
    
    (fileext!='.bmp'))
           {
               alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
               g('pic').focus();
       return;
           }
           
    image = new Image();
    image.src = picPath;
    
    g('word').style.display = 'block';
    
    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;
    }
    }
    function kong1()
    {
     if(g('box1').innerHTML=="")
     return;
     else
     g('box1').innerHTML="";
     }
    function kong2()
    {
     if(g('box2').innerHTML=="")
     return;
     else
     g('box2').innerHTML="";
     }
    function kong3()
    {
     if(g('box3').innerHTML=="")
     return;
     else
     g('box3').innerHTML="";
     }
    function kong4()
    {
     if(g('box4').innerHTML=="")
     return;
     else
     g('box4').innerHTML="";
     }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
      <input type="file" name="pic" id="pic" onchange='loadImage(this)' />
    <div id="word" style="display:none">正在加载图片…</div>
    <div style="width:350px; height:85px;">
    <div id='box1' style="float:left; margin-left:5px; border: solid 1px #666; width:80px; 
    
    height:80px; text-align:center;"></div>
    <div id='box2' style="float:left; margin-left:5px; border: solid 1px #666; width:80px; 
    
    height:80px; text-align:center;"></div>
    <div id='box3' style="float:left; margin-left:5px; border: solid 1px #666; width:80px; 
    
    height:80px; text-align:center;"></div>
    <div id='box4' style="float:left; margin-left:5px; border: solid 1px #666; width:80px; 
    
    height:80px; text-align:center;"></div>
    </div>
    <div style=" margin-left:50px; letter-spacing:61px;">
    <input type="button" id="qing1" onclick="kong1()" />
    <input type="button" id="qing2" onclick="kong2()" />
    <input type="button" id="qing3" onclick="kong3()" />
    <input type="button" id="qing4" onclick="kong4()" />
    </div>
    </form>
    </body>
    </html>
    
    • 已移动 Sheng Jiang 蒋晟 2011年1月11日 5:47 (发件人:一般性问题讨论区)
    2011年1月10日 7:18

答案

全部回复