FileUpload: Show alert when file type is an image

Question

A simple file upload

<dl>
    <dt><label for="fileupload">{L_FILENAME}:</label></dt>
    <dd>
        <input type="file" name="fileupload" id="fileupload" maxlength="{FILESIZE}" 
               value="" />
    </dd>
</dl>

I need a check for images (jpg, jpeg, gif, png). When there is an image, an alert message should say: "You are trying to upload an image. Please use the image uploader".

Note: The image-check should start directly after the file is selected and not after the form is submitted.

Is this possible with jQuery?

I tried many solutions without success. Thank you!

if you add accept="image/*" in input type ,then you dont need such alert.It automatically suggests you only images. — Banik
– Banik, Commented Apr 9, 2015 at 12:48
@Banik please read my question. I dont want only images. I want everything without images ;) — labu77
– labu77, Commented Apr 9, 2015 at 13:10

Shubh · Accepted Answer · 2015-04-09 13:48:18Z

2

If I am correct then you are looking for .change event.

$("#fileupload").change(function (e) {});

Now use the below code,

$("#fileupload").change(function(e) {
    var val = $(this).val();
    if (val.match(/(?:gif|jpg|png|bmp)$/)) {
        alert("You are trying to upload an image. Please use the image uploader!");
    }
});

Demo

Possibly, you could play with the Regex to match your file extensions /(?:gif|jpg|JPG|JPEG|png|PNG|bmp)$/.

Updated Fiddle

Hope it helps!

edited Apr 9, 2015 at 13:48

answered Apr 9, 2015 at 13:10

Shubh

6,7499 gold badges54 silver badges86 bronze badges

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

2 Comments

labu77 Over a year ago

yes, thats what I mean. Perfect. I have only a lil suggestion. Is it possible to add a lowercase option, that JPG will also work? Maybe you can edit your answer? thank you very much.

Shubh Over a year ago

You should be able to do it Sample. Just play with the regex gif|jpg|JPG|JPEG|png|PNG|bmp

Collectives™ on Stack Overflow

FileUpload: Show alert when file type is an image

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related