I want to work with array name in change function

Question

I want to check its valid image or not. My code valid image is as follow and its work perfects but, when its image array then it doesn't work?

$("#file").change(function() {
    var val = $(this).val();
    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            //alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("Please Select Valid Image");
            break;
    }

});

its work perfect for one image means its work on id but now I want to work with image array then what I do ? its possible or not?

<input id="file" type="file" name="images[]">Enter 8 Images For Batter Product View
<input type="button" id="addmore" value="Add More Image">

in add more image its give me the new image so I take an array so I want to check in the array this change function its valid image or not? is it possible?

thanks

Take a look here: http://stackoverflow.com/questions/17400191/get-the-files-chosen-using-the-input-type-file-multiple-and-store-them-in-an-a — Alex2php, Feb 11 '17 at 20:24

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

Inputs of type file have an attribute called files which is an array of the files the user selects. It contains information such as names and sizes. You can loop through them and check if the user have entered a valid image or not, like this:

$("#file").change(function() {
    var files = this.files; // get the array of files
    var valid = true;

    for(var i = 0; i < files.length && valid; i++) { // while there still files in the array, and valid still true
        var val = files[i].name; // get the current filename

        // check if the file is a valid image or not (if not don't forget to set valid to false)
        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png':
                // this is a valid image
            break;
            default:
                // this is not a valid image so "valid" should become false
                valid = false;
            break;
        }
    }

    if(!valid) // if valid was set to false insde the array (means an invalid file was selected)
        alert("select valid images");
});

Note: checking if the files are images on the client side isn't always effective, the user could by-pass your check by changing the extension name of a file that isn't an image to, for example, .jpg. Read more here!

edited May 23 '17 at 12:08

Community

1
1

answered Feb 11 '17 at 20:24

ibrahim mahrir

31,174
5
48
73

thanks for replr sir .how to check .jpg in valid ? sir – Darshan Feb 11 '17 at 20:33
@Darshan Just the way you had it! Just put you switch instead of my comment! But as I said checking just the extention isn't always effective! – ibrahim mahrir Feb 11 '17 at 20:39
@Darshan I added your switch statement where it should be! – ibrahim mahrir Feb 11 '17 at 20:42
@Darshan check this [**answer**](http://stackoverflow.com/a/6225815/6647153) you won't need any of the above. Just set the attribute `accept` of the input! No validation whatsoever is needed! – ibrahim mahrir Feb 11 '17 at 20:45
thank you so much sir but i have to work this code i haven't any option so i do it sir – Darshan Feb 11 '17 at 20:48
i put your code but its always valid true its give alert but its accept any file – Darshan Feb 11 '17 at 20:50
i put your code but its always valid true its give alert but its accept any file and my be its check in first file of image may be for id ? not work in second file ? – Darshan Feb 11 '17 at 20:57

score 0 · Answer 2 · edited Feb 11 '17 at 21:06

I have simply change id="file" to class="file" and it works for me.

<input class="file" type="file" name="images[]">Enter 8 Images For Batter Product View

<input type="button" id="addmore" value="Add More Image">

<script type="text/javascript">
$(".file").change(function() {
    var val = $(this).val();
    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            //alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("Please Select Valid Image");
            break;
    }

});

its work only first time when its first image valid then ts add valid in all tag — Darshan, Feb 11 '17 at 20:42

I want to work with array name in change function

2 Answers2