CODEWITHSUNDEEP
jquery
Nips
Nips

Reputation: 13870

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

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>

Upvotes: 4

Views: 5886

Answers (1)

Nips
Nips

Reputation: 13870

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.

Upvotes: 12

Related Questions