Check filesize before upload

Question

I have a website that allows users to upload video files but I want to limit the filesize to 2MB , this is pretty straightforward after uploading the file but does anyone knows if I can check the file-size before uploading it so I don't overload the server unnecessarily ?

I might be looking for a javascript/ajax solution but I don't have a clue on how to achieve this.

Any help will be very welcome. Thanks guys!

UPDATE:

I need to check the file size on client-side and NOT on server-side, is this possible ?

Answer 1

You can read local files in JavaScript using file reader in HTML5:
http://www.html5rocks.com/en/tutorials/file/dndfiles/

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    console.log(f.size);        /*<--Here is your size of the file! :D*/
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);