Is there any way to check the image size before sending the form?
I'm 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>
I answer my own 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>
This works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With