Check file input size with jQuery

Question

hey guys,

I have a form with file upload capabilities and I would like to be able to have some nice client side error reporting if the file the user is trying to upload is too big, is there a way to check against file size with jQuery, either purely on the client or somehow posting the file back to the server to check?

Answer 1

You would have to post the file back to the server. For security reasons jQuery (Javascript) doesn't have access to your file system.

If you can use Java or Flash in the browser, you can check that way.

Answer 2

No it's possible.

But you can use Flash to upload the file, and Flash does know how large the file is.

But there is a feature request at JQUpload that you might want to check out.

Answer 3

It is not possible to upload files with jQuery or check local file size, the only way to know the size of the file (other than using Flash) is to upload it.

Answer 4

You can do this type of checking with Flash or Silverlight but not Javascript. The javascript sandbox does not allow access to the file system. The size check would need to be done server side after it has been uploaded.

If you want to go the Silverlight/Flash route, you could check that if they are not installed to default to a regular file upload handler that uses the normal controls. This way, if the do have Silverlight/Flash installed their experience will be a bit more rich.

Answer 5

It is true that you don't have access to filesystem (for example the full file path), however, there are some properties about the file that you do have access to, and the file size is one of them.

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);

});