Alex Rivera | Logout

JavaScript file upload size validation

Asked 2010-09-15T12:58:42.847
372

Is there any way to check file size before uploading it using JavaScript?

javascript validation file-upload
Edit
Report

2 Answers

146

Using jquery:

$('#image-file').on('change', function() {
  console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">

  Upload image:
  <input id="image-file" type="file" name="file" />
  <input type="submit" value="Upload" />


</form>

answered 2012-11-06T11:21:04.513
14

No Yes, using the File API in newer browsers. See TJ's answer for details.

If you need to support older browsers as well, you will have to use a Flash-based uploader like SWFUpload or Uploadify to do this.

The SWFUpload Features Demo shows how the file_size_limit setting works.

Note that this (obviously) needs Flash, plus the way it works is a bit different from normal upload forms.

answered 2010-09-15T13:03:42.930

Your Answer