HTML How to limit file upload to be only images

Question

With HTML  how do I limit what kind of filetypes can be uploaded    To easy the user experience  I want to limit file uploads to be only images  jpeg  gif  png     lt form method  post  action       enctype  multipart form-data  gt   lt label for  image  gt Photo lt  label gt   lt input name  image  type  file    gt   lt  form gt

User · Answer

You can only do this securely on the server-side. Using the "accept" attribute is good, but must also be validated on the server side lest users be able to cURL to your script without that limitation.

I suggest that you: discard any non-image file, warn the user, and redisplay the form.

User · Answer

Here is the HTML for image upload  By default it will show image files only in the browsing window because we have put accept  image     But we can still change it from the dropdown and it will show all files  So the Javascript part validates whether or not the selected file is an actual image     lt div class  col-sm-8 img-upload-section  gt        lt input name  image3  type  file  accept  image    id  menu images   gt        lt img id  menu image  class  preview img    gt        lt input type  submit  value  Submit    gt    lt  div gt     Here on the change event we first check the size of the image  And in the second if condition we check whether or not it is an image file   this files 0  type indexOf  image   will be -1 if it is not an image file   document getElementById  menu images   onchange   function          var reader   new FileReader        if this files 0  size gt 528385           alert  Image Size should not be greater than 500Kb                menu image   attr  src   blank                menu image   hide                  menu images   wrap   lt form gt    closest  form   get 0  reset                menu images   unwrap                 return false            if this files 0  type indexOf  image    -1           alert  Invalid Type                menu image   attr  src   blank                menu image   hide                  menu images   wrap   lt form gt    closest  form   get 0  reset                menu images   unwrap                     return false               reader onload   function  e               get loaded data and render thumbnail          document getElementById  menu image   src   e target result              menu image   show                    read the image file as a data URL      reader readAsDataURL this files 0

User · Answer

Because  lt input type  quot file quot  id  quot fileId quot  accept  quot image   quot  gt  can t guarantee that someone will choose an image  you need some validation like this  if   document getElementById  quot fileId quot   files 0  type match  image                        alert  You can  t upload this type of file                     return

User · Answer

Checkout a project called Uploadify  http   www uploadify com   It s a Flash   jQuery based file uploader  This uses Flash s file selection dialog  which gives you the ability to filter file types  select multiple files at the same time  etc

User · Answer

Ultimately  the filter that is displayed in the Browse window is set by the browser  You can specify all of the filters you want in the Accept attribute  but you have no guarantee that your user s browser will adhere to it   Your best bet is to do some kind of filtering in the back end on the server

User · Answer

HTML5 says  lt input type  file  accept  image      Of course  never trust client-side validation  Always check again on the server-side

User · Answer

lt script gt       function chng                 var typ document getElementById  fiile   value          var res   typ match   jp             if res                        alert  sucess                      else                       alert  Sorry only jpeg images are accepted                document getElementById  fiile   value      clear the uploaded file                   lt  script gt    Now in the html part   lt input type  file  onchange  chng    gt    this code will check if the uploaded file is a jpg file or not and restricts the upload of other types

User · Answer

HTML5 File input has accept attribute and also multiple attribute  By using multiple attribute you can upload multiple images in an instance   lt input type  quot file quot  multiple accept  quot image   quot  gt   You can also limit multiple mime types   lt input type  quot file quot  multiple accept  quot image   audio   video   quot  gt   and another way of checking mime type using file object  file object gives you name size and type  var files e target files   var mimeType files 0  type     You can get the mime type  You can also restrict the user for some file types to upload by the above code

User · Answer

Edited  If things were as they SHOULD be  you could do this via the  Accept  attribute   http   www webmasterworld com forum21 6310 htm  However  browsers pretty much ignore this  so this is irrelavant   The short answer is  i don t think there is a way to do it in HTML   You d have to check it server-side instead   The following older post has some information that could help you  with alternatives     File input   39 accept  39  attribute - is it useful

User · Answer

This is what I have been using successfully       lt div class  quot custom-file quot  gt       lt input type  quot file quot  class  quot custom-file-input image-gallery quot  id  quot image-gallery quot  name  quot image-gallery   quot  multiple accept  quot image   quot  gt      lt label class  quot custom-file-label quot  for  quot image-gallery quot  gt Upload Image s  lt  label gt   lt  div gt       It is always a good idea to check for the actual file type on the server-side as well

[html] HTML: How to limit file upload to be only images?

Examples related to html

Examples related to image

Examples related to upload

Examples related to file-upload