Validate file size and type in a multiple input

Question

i have 3 input file, i wanna make a javascript validation for 3 input file in one submit button form event onSubmit=""

<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi"  >
    <div>
    <input type="file" name="fUpload1" id="fileUpload1"/>
    <input type="file" name="fUpload2" id="fileUpload2"/>
    <input type="file" name="fUpload3" id="fileUpload3"/>
    </div>
    <div>
    <input type="submit" name="upload" value="upload" />
    </div>
</form>

EDITED CODE new code that working but, still proccess saving

$(document).ready(function(){
    $('#tbl_next').click(function(){
        //alert('hello');
        $('input[type="file"]').each(function(){
            var thisFile = $(this);
            var fileSize = thisFile[0].files[0].size;
            var fileType = thisFile[0].files[0].type;
            //alert(fileSize);

            if(fileSize>1048576){ //do something if file size more than 1 mb (1048576)
                alert(fileSize +" bites\n ukuran gambar terlalu besar");
                return false;
            }else{
                switch(fileType){
                    case 'image/png':
                    case 'image/gif':
                    case 'image/jpeg':
                    case 'image/pjpeg':
                        alert("Acceptable image file!");
                        break;
                    default:
                        alert('Unsupported File!');
                        return false;
                }
            }
        });
        $('form#dataPribadi').submit();
    });
});

IDs must be unique in HTML, Guys its unique identifier — Satpal
– Satpal, Commented Sep 11, 2014 at 6:18
wrap it up in a form element and then have a onSubmit function on it — V31
– V31, Commented Sep 11, 2014 at 6:21
i tried but it for by one validation or per file input at event onchange — user3335420
– user3335420, Commented Sep 11, 2014 at 6:23

VPK · Accepted Answer · 2014-09-11 08:19:27Z

1

Change type of submit button to normal button and use onclick handler for it by giving a id as upload,

<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi"  >
    <div>
        <input type="file" name="fUpload1" id="fileUpload1"/>
        <input type="file" name="fUpload2" id="fileUpload2"/>
        <input type="file" name="fUpload3" id="fileUpload3"/>
    </div>
    <div>
        <input type="button" id="upload" value="upload" />
    </div>
</form>

and your click event handler should be,

$(document).ready(function(){
    $('#upload').click(function(){
        alert('hello');
        $('input[type="file"]').each(function(){
            var thisFile = $(this);
            var fileSize = thisFile[0].files[0].size;
            alert(fileSize);
        });
        $('form#dataPribadi').submit();
    });
});

UPDATED FIDDLE

edited Sep 11, 2014 at 8:19

answered Sep 11, 2014 at 6:28

VPK

3,0781 gold badge30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3335420 Over a year ago

thanks it works for the function, i'll improve again

user3335420 Over a year ago

but i still need a lil help later, may be :D

VPK Over a year ago

Ohh, you can add to your question though. We are glad to help!

user3335420 Over a year ago

i already update the code (javascript) with new code that u give to me, but when its get false input (file too big) php code / saving proccess still go on. i already put "return false;" but its not working to stop the proccess.

user3335420 Over a year ago

it still go on, maybe because it each proses

Collectives™ on Stack Overflow

Validate file size and type in a multiple input

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related