0

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!

Radiodef
  • 37,180
  • 14
  • 90
  • 125
labu77
  • 605
  • 1
  • 9
  • 30
  • http://stackoverflow.com/questions/8231058/file-type-validation-with-javascript – DLeh Apr 09 '15 at 12:47
  • 1
    if you add accept="image/*" in input type ,then you dont need such alert.It automatically suggests you only images. – Banik Apr 09 '15 at 12:48
  • @Banik please read my question. I dont want only images. I want everything without images ;) – labu77 Apr 09 '15 at 13:10

1 Answers1

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!

Shubh
  • 6,693
  • 9
  • 48
  • 83
  • 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. – labu77 Apr 09 '15 at 13:18
  • You should be able to do it [Sample](http://jsfiddle.net/vdkL8g75/). Just play with the regex `gif|jpg|JPG|JPEG|png|PNG|bmp` – Shubh Apr 09 '15 at 13:45
  • @Shubh, Thanks for perfect answer. – Billu Nov 05 '17 at 20:34