How to check image size (e.g. 1 MB) before uploading

Question

Is there any way to check the image size before submitting the form?

I am using jquery.form

JS:

$(document).ready(function() { var options = { target: '#myform', }; $('#myformbutton').click(function() { $('#myform').ajaxSubmit(options); return false; }); }); 

HTML:

 <form action="myaction" method="post" id="myform" enctype="multipart/form-data"> <label for="id_title">Title</label> <input id="id_title" type="text" name="title" maxlength="255" /> <label for="id_image">Image</label> <input type="file" name="image" id="id_image" /> <input type="button" id="myformbutton" value="Add!" /> </form> 

Answer 1

I answer my question:

  $(document).ready(function() { $('#id_image').bind('change', function() { if(this.files[0].size > 1000141){ $('#formerror').html('File is too big'); $('#myformbutton').hide(); }else{ $('#formerror').html(' '); $('#myformbutton').show('slow'); } }); }); 

And html:

  <div id="formerror"></div> <form action="myaction" method="post" id="myform" enctype="multipart/form-data"> <label for="id_title">Title</label> <input id="id_title" type="text" name="title" maxlength="255" /> <label for="id_image">Image</label> <input type="file" name="image" id="id_image" /> <input type="button" id="myformbutton" value="Add!" /> </form> 

It works.