PHP - How to check file size before uploading a file: This code check the size, if file too big it gives out error. If not to big, it disables the button and continues with the file upload. <? $max_size = '2000000'; //Max Size in bytes (2mb) ?> <script type="text/javascript"> var clicked = false; function disableMe() { var node = document.getElementById('file'); var check = node.files[0].fileSize; if (check > <?=$max_size;?>) { alert('Your file is to big! Your Size = '+node.files[0].fileSize+' Max Size = <?=$max_size;?>!'); return false; }else{ if (document.getElementById) { if (!clicked) { document.getElementById("mybutton").value = " Uploading... "; clicked = true; return true; } else { return false; } } else { return true; } } } </script> <form enctype="multipart/form-data" action="upload_file.php" method="post" class="body"> <td><font size='2'><b>Select a file:</b></font> </td><td><input type='file' id='file' name='file1'></td></tr><tr><td></td><td> <input type='submit' value=' Upload File ' id="mybutton" onClick='return disableMe()'> </form> Code (markup): Hope this is useful. Thanks
Have you actually tested this yet? As I have not seen Javascript capable of actually accessing the file system, and only way to do it was via ActiveX (limited to windows/IE only) or Flash/Silverlight. Course testing yours real quick (only modified it to alert the file size, nothing else), I selected a 1.2MB image and got this 1286281, so least we know fileSize works in Safari 4.
Hmm didn't know this would work, however I wouldn't rely on it. Make it so that it only disables the button if the filesize returns a valid value (for example, it seems to work in safari 4) -- or is this because kblessinggr tested this locally?
I saved and modified the html like so: <script type="text/javascript"> var clicked = false; function disableMe() { var node = document.getElementById('file'); var check = node.files[0].fileSize; alert('Your Size = '+node.files[0].fileSize); return false; } </script> <form enctype="multipart/form-data" action="upload_file.php" method="post" class="body"> <td><font size='2'><b>Select a file:</b></font> </td><td><input type='file' id='file' name='file1'></td></tr><tr><td></td><td> <input type='submit' value=' Upload File ' id="mybutton" onClick='return disableMe()'> </form> HTML: And I uploaded it up onto the web, so it was not done via localhost. I also just tested on Firefox 3 on a mac, and it works in reporting the file size.
It does not seem to work on Internet Explorer 6 however. (will edit with results from IE7 and 8) EDIT Does not work with IE7 or IE8 either: So basically (in my opinion anyways) the code above shouldn't be used as it's not cross browser compatible.
Well, it can be used if it can account for the fact that the object can be null (in which case no button should be disabled because it's impossible to know the filesize)
But in your original code, it must have been apparent you didn't test it in IE, otherwise you would have mentioned that caveat. In IE you have to use an ActiveX control (so pure javascript still doesn't seem possible): <head> <script> function getSize() { var myFSO = new ActiveXObject("Scripting.FileSystemObject"); var filepath = document.upload.file.value; var thefile = myFSO.getFile(filepath); var size = thefile.size; alert(size + " bytes"); } </script> </head> <body> <form name="upload"> <input type="file" name="file"> <input type="button" value="Size?" onClick="getSize();"> </form> </body> </html> HTML: But as such it might alert the user that they need to "trust" the script which most won't when asked to do so. I was trying to access fileSize attribute with JQuery but it seems fileSize isn't a standard DOM property as such isn't in JQuery and as such there isn't an easy way to do all the browsers in one call.
modified version. removed button disable. <? $max_size = '2000000'; //Max Size in bytes (2mb) ?> <script type="text/javascript"> var clicked = false; function checkSize() { var node = document.getElementById('file'); var check = node.files[0].fileSize; if (check > <?=$max_size;?>) { alert('Your file is to big!'); return false; } } </script> <form enctype="multipart/form-data" action="upload_file.php" method="post" class="body"> Select a file: <input type='file' id='file' name='file'> <input type='submit' value=' Upload File ' onClick='return checkSize()'> </form> Code (markup):