How to check file input size with jQuery?

by

You actually don’t have access to filesystem (for example reading and writing local files), however, due to HTML5 File Api specification, there are some file properties that you do have access to, and the file size is one of them.

For the HTML below

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

});

As it is a part of the HTML5 specification, it will only work for modern browsers (v10 required for IE) and I added here more details and links about other file information you should know: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

Old browsers support

Be aware that old browsers will return a null value for the previous this.files call, so accessing this.files[0] will raise an exception and you should check for File API support before using it

More Related Contents:

  1. Preview an image before it is uploaded
  2. jQuery Ajax File Upload
  3. How to get full path of selected file on change of using javascript, jquery-ajax?
  4. How to use FormData for AJAX file upload?
  5. Upload multiple image using AJAX, PHP and jQuery
  6. Upload file with Ajax XMLHttpRequest
  7. Validation of file extension before uploading file
  8. Get file size before uploading
  9. Using HTML5 file uploads with AJAX and jQuery
  10. How to remove one specific selected file from input file control
  11. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  12. How to upload a file using jQuery.ajax and FormData
  13. Is it possible to check dimensions of image before uploading?
  14. How to have jQuery restrict file types on upload?
  15. Integrating Dropzone.js into existing HTML form with other fields
  16. Cancel event on input type=”file”
  17. Uploading multiple files asynchronously by blueimp jquery-fileupload
  18. copying the value of a form’s file input field to another form’s input field
  19. A file input button for all browsers, is this possible?
  20. Remove selected file(s) before upload with Javascript
  21. trigger file upload dialog using javascript/jquery
  22. How can I upload files asynchronously with jQuery?
  23. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  24. Variable doesn’t get returned from AJAX function
  25. How do I simulate a mouseover in pure JavaScript that activates the CSS “:hover”?
  26. Force Download an Image Using Javascript
  27. How to create a stopwatch using JavaScript?
  28. Get image preview before uploading in React
  29. Send form data using ajax
  30. Content of html page changed by jQuery but “View Source” don’t reflect the changes

Leave a Comment