JavaScript prevent form submission if selected file is over limit

Question

Ok i am trying to write code wich prevent form submition if file is larger then 15 mb, my solution so far is something like this but i need help.

onchange="if(files[0].size < 15000000){$(\'form\').submit(function() {event.preventDefault()})};"

this is input type file attribute. I am on right, is it possible to add onsubmit='false', maybe in this way can someone help me?

Already answered here: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — Saravana, Dec 25 '14 at 14:28
One problem: `.submit()` just adds an event handler to an element. Once it's added for a file that exceeds the limit, it isn't being removed, so form submission will continue to be prevented even after changing to a different file. — Jonathan Lonowski, Dec 25 '14 at 14:42

Gayan C Liyanage · Answer 1 · 2014-12-25T14:33:05.077

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. This based on jQuery

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

});

This is javascipt one

//gets the element by its id
var myFile = document.getElementById('myFile');

//binds to onchange event of the input field
myFile.addEventListener('change', function() {
  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

score 0 · Answer 2 · answered Dec 25 '14 at 14:30

0

Are you using form.submit() to submit your form?? Can you use this same check that you have been using but send an ajax instead with request type as "POST"??

answered Dec 25 '14 at 14:30

Humpty Dumpty

57
8

JavaScript prevent form submission if selected file is over limit

2 Answers2