multiple file upload validation through array in jquery

Question

The below represents my script code

<script>
        $(document).ready(function (){    
            $("#checkfields").click(function (){

                var file1=$("#file1").val();
                if(file1){                        
                    var file_size=$('#file1')[0].files[0].size;
                    if(file_size<2097152){
                        var ext = $('#file1').val().split('.').pop().toLowerCase();                            
                        if($.inArray(ext,['jpg','jpeg','gif'])===-1){
                            alert("Invalid file extension");
                            return false;
                        }

                    }else{
                        alert("Screenshot size is too large.");
                        return false;
                    }                        
                }else{
                    alert("fill all fields..");         
                    return false;
                }
            });
        });
    </script>

The below represents my code

<form action="checkmobile.php" method="post" enctype="multipart/form-data" class="form-horizontal"> 
<div class="form-group">
                        <label for="element-13" class="control-label col-lg-2">Add Screenshots</label>
                        <div class="input-group">                            
                            <input type="file" id="file1" name="file[]" class="btn" multiple="multiple">
                        </div>
                    </div>
<div class="form-group">

                                <input type="submit" id="checkfields" class="btn btn-primary  col-lg-offset-2" value="Add">
                                <button class="btn btn-default col-lg-offset-1">Cancel</button>
                            </div>
                </form>

Now I want to know how to use array in jQuery for validating all selected files under the input.

If I select one image and one video then it must check validation for image and video. first it will validate image if image is ok then it will reject the video by invalid extension.

i want to validation for all files while submitting the button and if image not valid then return error and if there is video selected with image then also it return error.

please help.

Although I have resolved your problem but before posting the answer just want to confirm if you want upload only images... — Vivek Srivastava
– Vivek Srivastava, Commented Oct 11, 2015 at 19:39

Vivek Srivastava · Accepted Answer · 2015-10-11 19:50:17Z

2

Try using below code -

<script>
    $(document).ready(function (){    
        $("#checkfields").click(function (){
            //var modelname=$("#inputmodelname").val();
            for (var i = 0; i < $("#file1").get(0).files.length; ++i) {
                var file1=$("#file1").get(0).files[i].name;

                if(file1){                        
                    var file_size=$("#file1").get(0).files[i].size;
                    if(file_size<2097152){
                        var ext = file1.split('.').pop().toLowerCase();                            
                        if($.inArray(ext,['jpg','jpeg','gif'])===-1){
                            alert("Invalid file extension");
                            return false;
                        }

                    }else{
                        alert("Screenshot size is too large.");
                        return false;
                    }                        
                }else{
                    alert("fill all fields..");         
                    return false;
                }
            }
        });
    });
</script>

It validates all the selected files individually. I have commented your modelname variable line and in 'if' condition as i couldn't find any element related to it in the HTML.

answered Oct 11, 2015 at 19:50

Vivek Srivastava

5694 silver badges14 bronze badges

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

2 Comments

Bhargav Kukadiya Over a year ago

It redirects if i dont select any file which instead i want alert

Vivek Srivastava Over a year ago

You can put condition for it that if length of selection is zero then show alert.

Collectives™ on Stack Overflow

multiple file upload validation through array in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related