1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Check file size before uploading file

Discussion in 'PHP' started by hostrs.com, Aug 17, 2009.

0
  1. #1
    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
     
    hostrs.com, Aug 17, 2009 IP
  2. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    kblessinggr, Aug 17, 2009 IP
  3. premiumscripts

    premiumscripts Peon

    Messages:
    1,062
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    premiumscripts, Aug 17, 2009 IP
  4. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    kblessinggr, Aug 17, 2009 IP
  5. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    kblessinggr, Aug 17, 2009 IP
  6. hostrs.com

    hostrs.com Peon

    Messages:
    157
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I know there is a way to do it in ie. I have read online that it is not possible but it is.
     
    hostrs.com, Aug 17, 2009 IP
  7. premiumscripts

    premiumscripts Peon

    Messages:
    1,062
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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)
     
    premiumscripts, Aug 17, 2009 IP
  8. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    kblessinggr, Aug 17, 2009 IP
  9. hostrs.com

    hostrs.com Peon

    Messages:
    157
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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):
     
    hostrs.com, Aug 17, 2009 IP
  10. pabrams

    pabrams Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I try this and I get

    Error: 'files.0' is null or not an object
     
    pabrams, Oct 1, 2010 IP
  11. ranjanapatidar89

    ranjanapatidar89 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    :) Thank you..
     
    ranjanapatidar89, Apr 26, 2012 IP