Question

I have the following:

<input id="user_profile_pic" name="user[profile_pic]" type="file">

On the server I check to make sure it’s an image, but I want to check on the clientside first.

How with jQuery can I alert the user if the file input file selected isn’t a gif,jpg,png, or bmp?

Thanks

Answer 1

You want to check what the value of the element is, something along the lines of:

$("#user_profile_pic").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("not an image");
            break;
    }
});

Edit

Code changed based on comment – now removes the value of the selected file if not an image.