javascript怎么预览和判断图片大小？？

以下方法只能预览不能判断大小，img.readyState!="complete"判断为true为什么
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 id="Head1" runat="server">
    <title>主</title>
</style>
    <script language="javascript" type="text/javascript">
        function btnBacl_Click() {
            window.location = "UserList.aspx";
        }
         
        function Preview(imageshow,obj) {            obj.select();
            
            //得到真实的图片路径
            var realpath = document.selection.createRange().text;
           var img=document.createElement("img");  
           img.src=realpath ;
           if(img.readyState!="complete")
           {
             alert("未加载完成！")
           }
           else
           {
             alert(img.fileSize);
           }
           var browser = getBrowserInfo();           
            var verinfo = (browser + "").replace(/[^0-9.]/ig, "");
                      
            if (verinfo == "8.0") {                document.getElementById("imgPreview").innerHTML = "";
                document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src=\"" + realpath + "\")"; //使用滤镜效果,sizingMethod='scale'            }
            else {
                document.getElementById("Image1").src = realpath;
            }
              
        }        function getBrowserInfo() {
            var agent = navigator.userAgent.toLowerCase();            var regStr_ie = /msie [\d.]+;/gi;
            var regStr_ff = /firefox\/[\d.]+/gi
            var regStr_chrome = /chrome\/[\d.]+/gi;
            var regStr_saf = /safari\/[\d.]+/gi;
            //IE
            if (agent.indexOf("msie") > 0) {
                return agent.match(regStr_ie);
            }            //firefox
            if (agent.indexOf("firefox") > 0) {
                return agent.match(regStr_ff);
            }            //Chrome
            if (agent.indexOf("chrome") > 0) {
                return agent.match(regStr_chrome);
            }            //Safari
            if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
                return agent.match(regStr_saf);
            }        }
        function isimg()   
        {   
//          show.insertAdjacentElement("BeforeEnd",img);   
          show1.innerHTML = "图片大小" + img.fileSize/1024 +"K<br />图片宽度"+ img.offsetWidth +"<br />图片高度"+ img.offsetHeight;   
  
        }  
        
    </script></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" onChange="Preview(imageshow,this);" />
    </div>
    <div id="imgPreview" style='width: 110px; height: 133px;'>
        <asp:Image ID="Image1" runat="server" Width="110px"  Height="130px" CssClass="input" /><br />
        </div>
       
        <div><img border="0" id="imageshow" name="imageshow"src="" style="display:none;" alt="预览图片" >      </div>
    <div id="show" >
    </div>
    <div id="show1">
    </div>
    </form>
</body>
</html>JavaScript图片

解决方案 »

  1.   

    http://www.cnblogs.com/jackyrong/archive/2008/07/02/1234285.html挺不错的，这篇文章。
      

  2.   

    CheckExt(this)他是传一个图片对象进去，然后再获得图片大小的。应该符合你的要求。
      

  3.   

    $('img').bind('load',function(){
    $(this).attr('width');
    });在load事件里面可以获取加载完成后图片的大小，这时候你可以对图片的显示进行相关处理
      

  4.   

    非js的参考：
    http://www.cnblogs.com/insus/archive/2012/11/13/2768951.html
      

  5.   

    http://www.cnblogs.com/insus/archive/2012/03/08/2385054.html
    http://www.cnblogs.com/insus/archive/2012/03/08/2385054.html
      

  6.   

    加载完成可能需要0.5s，远慢于执行那行代码的速度，执行的时候，加载还没有完成，这本就很正常
    img.readyState如果你查过这个属性，你就知道它正是反应加载过程中的状态的
    所以，用事件来比较好
    img.onload = function(){if(img.readyState=="complete" || img.complete == true) ...};
    img.src=realpath ; //一定要在注册事件处理之后再赋值（加载）
    如果你在否定条件里alert，会发现可能会alert多次