Get file size before uploading

Question

Is there any way to find out the file size before uploading the file using AJAX / PHP in change event of input file?

Answer 1

For the HTML bellow

<input type="file" id="myFile" /> 

try the following:

//binds to onchange event of your input field $('#myFile').bind('change', function() {    //this.files[0].size gets the size of your file.   alert(this.files[0].size);  }); 

See following thread:

How to check file input size with jQuery?

Answer 2

Here's a simple example of getting the size of a file before uploading. It's using jQuery to detect whenever the contents are added or changed, but you can still get files[0].size without using jQuery.

$(document).ready(function() {    $('#openFile').on('change', function(evt) {      console.log(this.files[0].size);    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">    <input id="openFile" name="img" type="file" />  </form>

Here's a more complete example, some proof of concept code to Drag and Drop files into FormData and upload via POST to a server. It includes a simple check for file size.