'javascript multiple input file validation

I get the script from a site http://www.allphptricks.com/check-file-size-extension-uploading-using-jquery/

Html

<form name="form" method="post" action="" enctype="multipart/form-data" >
<p>
<label>Upload Picture:</label>
<input type="file" name="file" id="picture" required />
</p>
<p id="error1" style="display:none; color:#FF0000;">
Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.
</p>
<p id="error2" style="display:none; color:#FF0000;">
Maximum File Size Limit is 1MB.
</p>
<p>
<input name="submit" type="submit" value="Submit" id="submit" />
</p>
</form>

Script

$('input[type="submit"]').prop("disabled", true);
var a=0;
//binds to onchange event of your input field
$('#picture').bind('change', function() {
if ($('input:submit').attr('disabled',false)){
    $('input:submit').attr('disabled',true);
    }
var ext = $('#picture').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif','png','jpg','jpeg']) == -1){
    $('#error1').slideDown("slow");
    $('#error2').slideUp("slow");
    a=0;
    }else{
    var picsize = (this.files[0].size);
    if (picsize > 1000000){
    $('#error2').slideDown("slow");
    a=0;
    }else{
    a=1;
    $('#error2').slideUp("slow");
    }
    $('#error1').slideUp("slow");
    if (a==1){
        $('input:submit').attr('disabled',false);
        }
}
});

Its working well. but i have multiple file array fields.

<input type="file" name="file[]" id="picture" required />
<input type="file" name="file[]" id="picture" required />

SO how to validate those all fields as same name array.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source