Using jQuery, Restricting File Size Before Uploading

by

This is a copy from my answers in a very similar question: How to check file input size with jQuery?

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

For this HTML:

<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. Remove selected file(s) before upload with Javascript
  2. How can I modify with css an image appended with javascript?
  3. Check if an image is loaded (no errors) with jQuery
  4. Changing the image source using jQuery
  5. Asynchronously load images with jQuery
  6. What’s the easiest way to call a function every 5 seconds in jQuery? [duplicate]
  7. How do you cache an image in Javascript
  8. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  9. In Bootstrap open Enlarge image in modal
  10. Load image with jQuery and append it to the DOM
  11. How do I abort image load requests without using window.stop()
  12. Why is my ‘load’ event/function not beeing executed after switching to jQuery 3?
  13. I’d like to understand the jQuery plugin syntax
  14. Is there a full working example for a jqGrid ColumnChooser? [closed]
  15. How well does jQuery support backward compatibility?
  16. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  17. How to individually target multiple dropdowns in CSS for Dropkick Plug-in
  18. Summernote image upload
  19. How to get the image size (height & width) using JavaScript
  20. How to detect an audio has finished playing in a web page?
  21. Implementing jquery UI autocomplete to show suggestions when you type “@”
  22. Javascript, Razor and Escape characters. Like apostrophe
  23. Add image in pdf using jspdf
  24. Highcharts – Keep tooltip showing on click
  25. jQuery fade to new image
  26. Queue AJAX calls
  27. canvas- Cropping images in different shapes
  28. How to write a simple jQuery plugin [closed]
  29. Dynamically replace img src attribute with jQuery
  30. Crop image white space automatically using jQuery

Leave a Comment