如何用JS 或Jquery 在客户端验证上传文件大小

时间：2022-08-28 08:09:14
在客户端判断上传文件大小  最好有事例代码 谢谢 

18 个解决方案

#1

自己鼎。。

#2

http://www.itwis.com/html/programme/javascript/20090903/5956.html

#3

参考
http://www.phpfans.net/article/htmls/201008/MjkyMTc0.html
http://zgqhyh.javaeye.com/blog/315709

#4

用IE组件 的过

#5

<HTML>

<HEAD>

<title>******上传文件大小的限制和判断***********</title>

<script language="javascript" type="text/javascript">

function getFileSize(filename)

{

    // var filename = document.all('fileup').value; //获得上传文件的物理路径

    if(filename =='')

     {

       alert("你还没有浏览要上传的文件"); 

return false;

     }


     try { 

       

var fso,f,fname,fsize;

var flength=40000; //设置上传的文件最大值（单位：kb），超过此值则不上传。 

fso=new ActiveXObject("Scripting.FileSystemObject");

        f=fso.GetFile(filename);//文件的物理路径

fname=fso.GetFileName(filename);//文件名（包括扩展名）

fsize=f.Size; //文件大小（bit）

fsize=fsize/1024;

//去掉注释，可以测试

        //alert("文件路径："+f);

//alert("文件名："+fname);

//alert("文件大小："+fsize+"kb");

if(fsize>flength)

{

alert("上传的文件到小为："+fsize+"kb,\n超过最大限度"+flength+"kb,不允许上传 ");

return false;

}

else

{alert("允许上传，文件大小为："+fsize+"kb");}

   

      }

      catch(e) 

{

alert(e+"\n 跳出此消息框，是由于你的activex控件没有设置好,\n"+

"你可以在浏览器菜单栏上依次选择\n"+

"工具->internet选项->\"安全\"选项卡->自定义级别,\n"+

"打开\"安全设置\"对话框，把\"对没有标记为安全的\n"+

"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可");

         return false;

      }

   

   return true;

     

}

</script>

</head>

<body>

<form id="Form1" method="post" encType="multipart/form-data" runat="server">

<INPUT id="fileup" type="file" size="80" name="fileup" onpropertychange="getFileSize(this.value)">

<input type=button onclick="getFileSize(document.all('fileup').value)" value="测试"> 

</form>

</body>



经过测试

#6

楼上的就行！@

  或者百度！

  

#7

重申 兼容IE FF 不用IE控件（ActiveXObject） 有事例代码继续加分

#8

引用 5 楼 luqc1985 的回复:
C# code
<HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fil……

可以试试这个

#9

引用 5 楼 luqc1985 的回复:
C# code
<HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fileup')……

+1

#10

没其他的了吗? 继续鼎

#11

HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fileup').value; //获得上传文件的物理路径
    if(filename =='')
     {
       alert("你还没有浏览要上传的文件"); 
return false;
     }

     try { 
       
var fso,f,fname,fsize;
var flength=40000; //设置上传的文件最大值（单位：kb），超过此值则不上传。 
fso=new ActiveXObject("Scripting.FileSystemObject");
        f=fso.GetFile(filename);//文件的物理路径
fname=fso.GetFileName(filename);//文件名（包括扩展名）
fsize=f.Size; //文件大小（bit）
fsize=fsize/1024;
//去掉注释，可以测试
        //alert("文件路径："+f);
//alert("文件名："+fname);
//alert("文件大小："+fsize+"kb");
if(fsize>flength)
{
alert("上传的文件到小为："+fsize+"kb,\n超过最大限度"+flength+"kb,不允许上传 ");
return false;
}
else
{alert("允许上传，文件大小为："+fsize+"kb");}
   
      }
      catch(e) 
{
alert(e+"\n 跳出此消息框，是由于你的activex控件没有设置好,\n"+
"你可以在浏览器菜单栏上依次选择\n"+
"工具->internet选项->\"安全\"选项卡->自定义级别,\n"+
"打开\"安全设置\"对话框，把\"对没有标记为安全的\n"+
"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可");
         return false;
      }
   
   return true;
     
}
</script>
</head>
<body>
<form id="Form1" method="post" encType="multipart/form-data" runat="server">
<INPUT id="fileup" type="file" size="80" name="fileup" onpropertychange="getFileSize(this.value)">
<input type=button onclick="getFileSize(document.all('fileup').value)" value="测试"> 
</form>
</body>
 偷的5楼的代码 (*^__^*) 嘻嘻

#12

上传前判断要用到activex,否则你是没权限判断的
function       getFileSize (fileName)  {         
      if(document.all){         
      window.oldOnError =  window.onerror;                         
      window.onerror=  function(err)       {         
      if       (err.indexOf('utomation')       !=       -1)       {         
      alert('没有访问文件的权限');                                         
      return       true;                                 
      }                             
      else             
      return       false;                         
      };         
         var       fso=new       ActiveXObject('Scripting.FileSystemObject');         
      var       file=fso.GetFile(fileName);                         
      window.onerror       =       window.oldOnError;         
                      return       file.Size;           }}         

#13

应该会涉及到浏览器安全问题，可能会被阻止。。

但jquery uploadify竟然可以，不知道怎么做的！！？求解！

#14

如何用JS 或Jquery 在客户端验证上传文件大小

#15

其实 jquery uploadify 的上传主体文件是 uploader.swf。。。
还是flash。
想不用控件的话，HTML5倒是可以。

#16

引用 13 楼 yuxh81 的回复:
应该会涉及到浏览器安全问题，可能会被阻止。。

但jquery uploadify竟然可以，不知道怎么做的！！？求解！


他是flash

#17

引用 15 楼 mabao669 的回复:
其实 jquery uploadify 的上传主体文件是 uploader.swf。。。
还是flash。
想不用控件的话，HTML5倒是可以。


HTML5 不兼容 IE 6,7
IE 8 只兼容一部分 而且 此部分不兼容

#18



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

  <html> 

  <head> 

  <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> 

  <title>Insert title here </title> 

  <script type="text/javascript"> 

 	var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 

  

 	var sizeLabel = ["B", "KB", "MB", "GB"]; 

 	 

 	function fileChange(target) { 

  

 		var fileSize = 0; 

 		 

 		if (isIE && !target.files) { 

 			var filePath = target.value; 

 			var fileSystem = new ActiveXObject("Scripting.FileSystemObject");    

 			var file = fileSystem.GetFile (filePath); 

 			fileSize = file.Size; 

 		} else { 

 			fileSize = target.files[0].size; 

 		} 

 		displayFileSize(fileSize); 

 	} 

  

 	function displayFileSize(size) { 

 		var fileSize = document.getElementById("fileSize"); 

 		fileSize.innerHTML = calFileSize(size); 

 	} 

  

 	function calFileSize(size) { 

 		for (var index = 0; index  < sizeLabel.length; index++) { 

 			 

 			if (size  < 1024) { 

 				return round(size, 2) + sizeLabel[index]; 

 			} 

 			 

 			size = size / 1024; 

 		} 

  

 		return round(size, 2) + sizeLabel[index]; 

 	} 

  

 	function round(number, count) { 

 		return Math.round(number * Math.pow(10, count)) / Math.pow(10, count); 

 	} 

 	 

  </script> 

  </head> 

  <body> 

 	 <div> 

 		 <input type="file" onchange="fileChange(this);"> 

 	 </div> 

 	 <div id="fileSize"> 

 	 </div> 

 	 

  </body> 

  </html>


测试通过, IE里 不弹出警告是不可能的.
这个 兼容IE,FF 和 Chrome

#1

自己鼎。。

#2

http://www.itwis.com/html/programme/javascript/20090903/5956.html

#3

参考
http://www.phpfans.net/article/htmls/201008/MjkyMTc0.html
http://zgqhyh.javaeye.com/blog/315709

#4

用IE组件 的过

#5

<HTML>

<HEAD>

<title>******上传文件大小的限制和判断***********</title>

<script language="javascript" type="text/javascript">

function getFileSize(filename)

{

    // var filename = document.all('fileup').value; //获得上传文件的物理路径

    if(filename =='')

     {

       alert("你还没有浏览要上传的文件"); 

return false;

     }


     try { 

       

var fso,f,fname,fsize;

var flength=40000; //设置上传的文件最大值（单位：kb），超过此值则不上传。 

fso=new ActiveXObject("Scripting.FileSystemObject");

        f=fso.GetFile(filename);//文件的物理路径

fname=fso.GetFileName(filename);//文件名（包括扩展名）

fsize=f.Size; //文件大小（bit）

fsize=fsize/1024;

//去掉注释，可以测试

        //alert("文件路径："+f);

//alert("文件名："+fname);

//alert("文件大小："+fsize+"kb");

if(fsize>flength)

{

alert("上传的文件到小为："+fsize+"kb,\n超过最大限度"+flength+"kb,不允许上传 ");

return false;

}

else

{alert("允许上传，文件大小为："+fsize+"kb");}

   

      }

      catch(e) 

{

alert(e+"\n 跳出此消息框，是由于你的activex控件没有设置好,\n"+

"你可以在浏览器菜单栏上依次选择\n"+

"工具->internet选项->\"安全\"选项卡->自定义级别,\n"+

"打开\"安全设置\"对话框，把\"对没有标记为安全的\n"+

"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可");

         return false;

      }

   

   return true;

     

}

</script>

</head>

<body>

<form id="Form1" method="post" encType="multipart/form-data" runat="server">

<INPUT id="fileup" type="file" size="80" name="fileup" onpropertychange="getFileSize(this.value)">

<input type=button onclick="getFileSize(document.all('fileup').value)" value="测试"> 

</form>

</body>



经过测试

#6

楼上的就行！@

  或者百度！

  

#7

重申 兼容IE FF 不用IE控件（ActiveXObject） 有事例代码继续加分

#8

引用 5 楼 luqc1985 的回复:
C# code
<HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fil……

可以试试这个

#9

引用 5 楼 luqc1985 的回复:
C# code
<HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fileup')……

+1

#10

没其他的了吗? 继续鼎

#11

HTML>
<HEAD>
<title>******上传文件大小的限制和判断***********</title>
<script language="javascript" type="text/javascript">
function getFileSize(filename)
{
    // var filename = document.all('fileup').value; //获得上传文件的物理路径
    if(filename =='')
     {
       alert("你还没有浏览要上传的文件"); 
return false;
     }

     try { 
       
var fso,f,fname,fsize;
var flength=40000; //设置上传的文件最大值（单位：kb），超过此值则不上传。 
fso=new ActiveXObject("Scripting.FileSystemObject");
        f=fso.GetFile(filename);//文件的物理路径
fname=fso.GetFileName(filename);//文件名（包括扩展名）
fsize=f.Size; //文件大小（bit）
fsize=fsize/1024;
//去掉注释，可以测试
        //alert("文件路径："+f);
//alert("文件名："+fname);
//alert("文件大小："+fsize+"kb");
if(fsize>flength)
{
alert("上传的文件到小为："+fsize+"kb,\n超过最大限度"+flength+"kb,不允许上传 ");
return false;
}
else
{alert("允许上传，文件大小为："+fsize+"kb");}
   
      }
      catch(e) 
{
alert(e+"\n 跳出此消息框，是由于你的activex控件没有设置好,\n"+
"你可以在浏览器菜单栏上依次选择\n"+
"工具->internet选项->\"安全\"选项卡->自定义级别,\n"+
"打开\"安全设置\"对话框，把\"对没有标记为安全的\n"+
"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可");
         return false;
      }
   
   return true;
     
}
</script>
</head>
<body>
<form id="Form1" method="post" encType="multipart/form-data" runat="server">
<INPUT id="fileup" type="file" size="80" name="fileup" onpropertychange="getFileSize(this.value)">
<input type=button onclick="getFileSize(document.all('fileup').value)" value="测试"> 
</form>
</body>
 偷的5楼的代码 (*^__^*) 嘻嘻

#12

上传前判断要用到activex,否则你是没权限判断的
function       getFileSize (fileName)  {         
      if(document.all){         
      window.oldOnError =  window.onerror;                         
      window.onerror=  function(err)       {         
      if       (err.indexOf('utomation')       !=       -1)       {         
      alert('没有访问文件的权限');                                         
      return       true;                                 
      }                             
      else             
      return       false;                         
      };         
         var       fso=new       ActiveXObject('Scripting.FileSystemObject');         
      var       file=fso.GetFile(fileName);                         
      window.onerror       =       window.oldOnError;         
                      return       file.Size;           }}         

#13

应该会涉及到浏览器安全问题，可能会被阻止。。

但jquery uploadify竟然可以，不知道怎么做的！！？求解！

#14

如何用JS 或Jquery 在客户端验证上传文件大小

#15

其实 jquery uploadify 的上传主体文件是 uploader.swf。。。
还是flash。
想不用控件的话，HTML5倒是可以。

#16

引用 13 楼 yuxh81 的回复:
应该会涉及到浏览器安全问题，可能会被阻止。。

但jquery uploadify竟然可以，不知道怎么做的！！？求解！


他是flash

#17

引用 15 楼 mabao669 的回复:
其实 jquery uploadify 的上传主体文件是 uploader.swf。。。
还是flash。
想不用控件的话，HTML5倒是可以。


HTML5 不兼容 IE 6,7
IE 8 只兼容一部分 而且 此部分不兼容

#18



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

  <html> 

  <head> 

  <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> 

  <title>Insert title here </title> 

  <script type="text/javascript"> 

 	var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 

  

 	var sizeLabel = ["B", "KB", "MB", "GB"]; 

 	 

 	function fileChange(target) { 

  

 		var fileSize = 0; 

 		 

 		if (isIE && !target.files) { 

 			var filePath = target.value; 

 			var fileSystem = new ActiveXObject("Scripting.FileSystemObject");    

 			var file = fileSystem.GetFile (filePath); 

 			fileSize = file.Size; 

 		} else { 

 			fileSize = target.files[0].size; 

 		} 

 		displayFileSize(fileSize); 

 	} 

  

 	function displayFileSize(size) { 

 		var fileSize = document.getElementById("fileSize"); 

 		fileSize.innerHTML = calFileSize(size); 

 	} 

  

 	function calFileSize(size) { 

 		for (var index = 0; index  < sizeLabel.length; index++) { 

 			 

 			if (size  < 1024) { 

 				return round(size, 2) + sizeLabel[index]; 

 			} 

 			 

 			size = size / 1024; 

 		} 

  

 		return round(size, 2) + sizeLabel[index]; 

 	} 

  

 	function round(number, count) { 

 		return Math.round(number * Math.pow(10, count)) / Math.pow(10, count); 

 	} 

 	 

  </script> 

  </head> 

  <body> 

 	 <div> 

 		 <input type="file" onchange="fileChange(this);"> 

 	 </div> 

 	 <div id="fileSize"> 

 	 </div> 

 	 

  </body> 

  </html>


测试通过, IE里 不弹出警告是不可能的.
这个 兼容IE,FF 和 Chrome
标签：

相关文章