none
【JS/ajax】无刷新验证上传文件大小问题 RRS feed

  • 问题

  • 最近做了一个无刷新验证图片大小的功能,我是利用js结合ajax控件制作的。由于属于WEB项目。所以我每个浏览器都测试。确发现了一个问题

    代码如下:

     

     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
                </asp:ScriptManager>

    function perImg(o,maxsize)
    {
        var filepath="";
        var x=document.getElementById(o.id);//file对象
        var agent=window.navigator.userAgent;
        var isIE7 = agent.indexOf('MSIE 7.0') != -1;
        var isIE8 = agent.indexOf('MSIE 8.0') != -1;
         if( !o.value.match(/.jpg|.gif|.png|.bmp/i))
            {
                 alert('图片格式无效!');
                 document.getElementById('image').src="";
                 Upload.clear(x);
          
            }
           
            if(agent.indexOf("Firefox")!=-1)//判断浏览器的类型
            {//火狐
                
                document.getElementById('image').src = x.files[0].getAsDataURL();
                filepath = x.value;//获取图片路径
                var size = x.files[0].fileSize;
                if (size > parseInt(maxsize))
                { 
                  alert("文件不能大于300K!");
                  Upload.clear(x); 
                  document.getElementById('image').src="";//清除对应IMG控件
                }
               
                alert('FF');

             }
             else if (isIE7 || isIE8)
             { //IE7 IE8
              
                x.select();
                document.getElementById('image').src= document.selection.createRange().text;
                filepath = document.selection.createRange().text;
                 alert('IE78');
             }
             else
             {//IE6
               
                document.getElementById('image').src =x.value;
                filepath = x.value;    
                alert('IE6');     
             }
             PageMethods.ValidateFile(filepath, maxsize, ieCallBack);
       
       
    }



    function ieCallBack(response)
    {
        if (response == "invalid")
        {
           
            alert("文件不能大于300K!");
            var file=document.getElementById('file');
            document.getElementById('image').src="";
            Upload.clear(file);
           
        }


    }

     

     

    后台代码:

        [System.Web.Services.WebMethod]

        public static string ValidateFile(string filepath, string filezie)
        {

            try
            {
                FileStream fs = new FileStream(filepath, FileMode.Open, FileAccess.Read);

                if (fs.Length > int.Parse(filezie))

                    return "invalid";

                return "valid";
            }
            catch
            {
                return "error";//前台什么都不做
            }

        }

     

    <img id="image" width="80" height="85" runat="server"  />

    <input type="file" id="file" runat="server"  name="file" onchange="perImg(this,'300000')" />

    限制图片大小不能超过300k  本机IE6运行如图:

     

    但是我如果在其他机器连接本机测试同样的浏览器就没有弹出提示 如图:

     

    请问一下,这是什么原因造成的?感谢


    买海参选煜诚 煜诚海参 真心品质 http://jinweb.taobao.com
    • 已移动 孟宪会Moderator 2010年10月13日 9:25 (发件人:.NET Framework 一般性问题讨论区)
    2010年10月13日 5:14

答案

  • 现代浏览器安全性很比较严格,不能访问客户端文件的,像Chrome,根本没有任何方法实现,只能先传到服务器端进行判断

    http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspx


    【孟子E章】
    2010年10月13日 9:24
    版主

全部回复

  • 现代浏览器安全性很比较严格,不能访问客户端文件的,像Chrome,根本没有任何方法实现,只能先传到服务器端进行判断

    http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspx


    【孟子E章】
    2010年10月13日 9:24
    版主
  • 现代浏览器安全性很比较严格,不能访问客户端文件的,像Chrome,根本没有任何方法实现,只能先传到服务器端进行判断

    http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspx


    【孟子E章】

    这种方法应该废弃了,不稳定。本地测试是可以的,如果将其放在服务器上的话,该功能就失效了。原因在于ajax方法获取不到上传图片的大小

    买海参选煜诚 煜诚海参 真心品质 http://jinweb.taobao.com
    2010年11月29日 1:52