By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,528 Members | 963 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,528 IT Pros & Developers. It's quick & easy.

Check file size with Javascript

P: 3
Was wondering if anyone knew of way to validate an images file size using javascript - i.e keeping the upload to say 500k. I've seen scripts to validate the dimensions - but nothing for the actual file size.
Feb 23 '06 #1
Share this Question
Share on Google+
6 Replies

niheel
Expert Mod 100+
P: 2,334
I usually just upload it to the server to check the file size. I don't think JS has the capabilities, could lead to security mis-uses if JS could access filesystem.

You could code something up if the all your user's allow ActiveX.
Feb 23 '06 #2

P: 3
Yeah - i'll be verifying on the backend using php - but seems strange that js can tell what a file type is - what the dimensions are - but not the file size.
Feb 23 '06 #3

P: 1
Hi
IT will help you.
Expand|Select|Wrap|Line Numbers
  1. function A()
  2. {
  3. var oas = new ActiveXObject("Scripting.FileSystemObject");
  4. var d = document.a.b.value;
  5. var e = oas.getFile(d);
  6. var f = e.size;
  7. alert(f + " bytes");
  8. }
  9.  
  10. </script>
  11. </head>
  12. <body>
  13. <form name="a">
  14. <input type="file" name="b">
  15. <input type="button" name="c" value="SIZE" onClick="A();">
  16. </form>
  17. </body>
  18. </html>
  19.  
Regards
Imran
Mar 12 '06 #4

P: 3
function A()
{
var oas = new ActiveXObject("Scripting.FileSystemObject");
var d = document.a.b.value;
var e = oas.getFile(d);
var f = e.size;
alert(f + " bytes");
}

</script>
</head>
<body>
<form name="a">
<input type="file" name="b">
<input type="button" name="c" value="SIZE" onClick="A();">
</form>
</body>
</html>
Thanks Imran - so applying this to my forms validation should look like this right?

Expand|Select|Wrap|Line Numbers
  1. <script language=javascript>
  2. extArray = new Array(".jpg", ".jpeg",".gif");  //".png", , ".gif"
  3.  
  4. function callCancel()
  5. {
  6.     document.frmlisting.action="listing_list.php?cityid=<?=$cityid?>&c_id=<?=$c_id?>";
  7.     document.frmlisting.submit();
  8. }
  9.  
  10. function callSave()
  11. {
  12. var oas = new ActiveXObject("Scripting.FileSystemObject");
  13. var d = document.frmlisting.txtlistingimage.value;
  14. var e = oas.getFile(d);
  15. var f = e.size;
  16. alert(f + "500000");
  17. }
  18. {
  19.     if(!isCurrency(document.frmlisting.txtlistingprice.value)){
  20.         alert("Price: Incorrect data");
  21.         document.frmlisting.txtlistingprice.select();
  22.         return;
  23.     }
  24.     if(isBlank(document.frmlisting.txtlistingtitle.value)){
  25.         alert("Title is Required");
  26.         document.frmlisting.txtlistingtitle.focus();
  27.         return;
  28.     }
  29.     if(!isBlank(document.frmlisting.txtlistingimage.value)){
  30.         if(!isValidFile(document.frmlisting.txtlistingimage.value)){
  31.             alert("Selected file is not a vaild image type. \nPlease select "+ (extArray.join("  ").toUpperCase())+ " files. ");
  32.             document.frmlisting.txtlistingimage.select();
  33.             return;
  34.         }
  35.     }
  36.     if(isBlank(document.frmlisting.txtlistingemail.value)){
  37.         alert("Email is Required");
  38.         document.frmlisting.txtlistingemail.select();
  39.         return;
  40.  
  41.     }
  42.     if(!isEmail(document.frmlisting.txtlistingemail.value)){
  43.         alert("Email: Incorrect data");
  44.         document.frmlisting.txtlistingemail.select();
  45.         return;
  46.     }
  47.  
  48.     document.frmlisting.action="listingsubmit.php";
  49.     document.frmlisting.submit();
  50. }
  51. </script>

HTML
Would be

[HTML]<Input type="file" name="txtlistingimage" style="WIDTH: 275px; HEIGHT: 20px" size=39 maxlength=100>

<input type="button" class="btn_text" value="Preview" onclick="javascript:callSave();" style="border:solid-1px; color: #333333 ">[/HTML]
Mar 12 '06 #5

sashi
Expert 100+
P: 1,754
hi there,

am not sure if this code is useful.. give it a try.. good luck my fren..

http://www.quirksmode.org/js/filesize.html
Jun 27 '06 #6

P: 1
Hello friend i came here to find check file size script. but i got activeXerror in first script and so now i create following script. if this help take it and try it.
1. this script load a image in Image Tag in Span Tag.
2. It check the file size.
3. if it is more than limit then remove image tag.
Expand|Select|Wrap|Line Numbers
  1. function imgLoad()
  2. {
  3. var strT = new String();
  4. document.getElementById("ShowImg").innerHTML= "";
  5. strT = document.ModReg.file1.value;
  6. if(strT != "")
  7. {
  8.     strT = "<img id='Sample' src='" + strT + "' width='100' height='100'></img>";
  9.     document.getElementById("ShowImg").innerHTML= strT;
  10.     if(!LimitedSize())
  11.     {
  12.        alert("File Size is more than 100 KB");
  13.        document.getElementById("ShowImg").innerHTML= "";
  14.     }
  15. }
  16. }
  17.  
  18. function LimitedSize()
  19. {
  20. var i;
  21. var y = document.images;
  22. for (i=0;i<y.length;i++)
  23. {
  24.     if((y[i].id) == 'Sample')
  25.     { 
  26.       if(y[i].fileSize > 102400)
  27.           return false;
  28.     }
  29. }
  30. return true;
  31. }
  32.  
//--------------HTML
Expand|Select|Wrap|Line Numbers
  1. <INPUT 
  2.       name=file1 type=file id="file1" onChange="imgLoad()" >
Sep 17 '06 #7

Post your reply

Sign in to post your reply or Sign up for a free account.