How to allow input type file to accept only image files

Question

I need to upload only image file through  lt input type  file  gt  tag    Right now  it accepts all file types  But  I want to restrict it to only specific image file extensions which include  jpg   gif etc   How can I achieve this functionality

User · Answer

Using this    lt input type  file  accept  image    gt    works in both FF and Chrome

User · Answer

Steps   1  Add accept attribute to input tag  2  Validate with javascript  3  Add server side validation to verify if the content is really an expected file type  For HTML and javascript    lt html gt   lt body gt   lt input name  image  type  file  id  fileName  accept   jpg  jpeg  png  onchange  validateFileType     gt   lt script type  text javascript  gt      function validateFileType            var fileName   document getElementById  fileName   value          var idxDot   fileName lastIndexOf        1          var extFile   fileName substr idxDot  fileName length  toLowerCase            if  extFile   jpg     extFile   jpeg     extFile   png                  TO DO          else              alert  Only jpg jpeg and png files are allowed                         lt  script gt   lt  body gt   lt  html gt    Explanation    The accept attribute filters the files that will be displayed in the file chooser popup  However  it is not a validation  It is only a hint to the browser  The user can still change the options in the popup   The javascript only validates for file extension  but cannot really verify if the select file is an actual jpg or png   So you have to write for file content validation on server side

User · Answer

Using type  file  and accept  image     or the format you want   allow the user to chose a file with specific format  But you have to re check it again in client side  because the user can select other type of files  This works for me    lt input  imageInput accept  image     change   processFile imageInput   name  upload-photo  type  file  id  upload-photo    gt    And then  in your javascript script  processFile imageInput        if  imageInput files 0           const file  File   imageInput files 0         var pattern    image-           if   file type match pattern             alert  Invalid format            return                    here you can do whatever you want with your image  Now you are sure that it is an image

User · Answer

Use it like this    lt input type  file  accept   png   jpg   jpeg    gt    It worked for me  https   jsfiddle net ermagrawal 5u4ftp3k

User · Answer

If you want to upload multiple images at once you can add multiple attribute to input     x000D   x000D  upload multiple files   lt input type  file  multiple accept  image    gt  x000D   x000D   x000D

User · Answer

In html   lt input type  quot file quot  accept  quot image   quot  gt   This will accept all image formats but no other file like pdf or video  But if you are using django  in django forms py  image field   forms ImageField Here are the parameters

User · Answer

Simple and powerful way dynamic accept  place formats in array like  quot image   quot   x000D   x000D  var upload document getElementById  upload    var array   video mp4   image png    upload accept array  upload addEventListener  change      gt    console log upload value     x000D   lt input type  file  id  upload   gt  x000D   x000D   x000D

User · Answer

i know i m late but this might help  you can add specific type of image or other file type and do validation in your code    lt input  style  quot margin-left  10px  margin-top  5px  quot  type  quot file quot  accept  quot image x-png image jpeg application pdf quot   change   quot handleFileInput  event  creditRatingFile   quot  name  quot creditRatingFile quot  id  quot creditRatingFile quot  gt        handleFileInput event        console log event       const file   event target files 0       if  file size  gt  2097152            throw err        else if         file type      quot application pdf quot    amp  amp        file type      quot application wps-office pdf quot     amp  amp         file type      application pdf    amp  amp  file type      image jpg    amp  amp  file type      image jpeg    amp  amp  file type      quot image png quot          throw err        else                  console log  file valid

User · Answer

you can use accept attribute for  lt input type  file  gt  read this docs http   www w3schools com tags att input accept asp

User · Answer

Use the accept attribute of the input tag  So to accept only PNG s  JPEG s and GIF s you can use the following code   x000D   x000D   lt input type  file  name  myImage  accept  image x-png image gif image jpeg    gt  x000D   x000D   x000D   Or simply   x000D   x000D   lt input type  file  name  myImage  accept  image      gt  x000D   x000D   x000D   Note that this only provides a hint to the browser as to what file-types to display to the user  but this can be easily circumvented  so you should always validate the uploaded file on the server also  It should work in IE 10   Chrome  Firefox  Safari 6   Opera 15   but support is very sketchy on mobiles  as of 2015  and by some reports  this may actually prevent some mobile browsers from uploading anything at all  so be sure to test your target platforms well  For detailed browser support  see http   caniuse com  feat input-file-accept

User · Answer

This can be achieved by   lt input type  file  accept  image      gt     But this is not a good way  you have to code on the server side to check the file an image or not   Check if image file is an actual image or fake image  if isset   POST  submit            check   getimagesize   FILES  fileToUpload    tmp name         if  check     false            echo  File is an image -      check  mime                   uploadOk   1            else           echo  File is not an image             uploadOk   0            For more reference  see here   http   www w3schools com tags att input accept asp http   www w3schools com php php file upload asp

[html] How to allow <input type="file"> to accept only image files?

Examples related to html