I am using a simple input box <input type="file" /> in a HTML form, and I want to enforce that only JPG, PNG, and GIF files can be uploaded.

How can I do this?

I am using a simple input box <input type="file" /> in a HTML form, and I want to enforce that only JPG, PNG, and GIF files can be uploaded.

How can I do this?

• c#
• javascript
• jquery
• html
• asp-mvc-3

Share Improve this question Follow edited May 5, 2012 at 4:16 Adam Lear♦ 38.8k1212 gold badges8282 silver badges103103 bronze badges asked May 4, 2012 at 4:16 AhsanAhsan 311 silver badge33 bronze badges 2

• possible duplicate of HTML <input type='file'> apply a filter – shf301 Commented May 4, 2012 at 4:19
• @Ahsan I agree with Ravi. But please note, this only checks the name of the file being uploaded. The actual format or content of the file could still be anything. – john_science Commented May 4, 2012 at 23:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

you can check this link, CodeProject: Image uploading

  $file = $("#yourFileuploadID");
                var $filePath = $.trim($file.val());
                if ($filePath == "") {
                    alert("Please browse a file to upload");
                    return;
                }

                var $ext = $filePath.split(".").pop().toLowerCase();
                var $allow = new Array("gif", "png", "jpg", "jpeg");
                if ($.inArray($ext, $allow) == -1) {
                    alert("Only image files are accepted, please browse a image file");
                    return;
                }

PS : It's better to have server side validation, it will be handy when javascript is disabled at client side. make sure you check for both