How to validate a file upload field using Javascript jquery

Question

How can I validate if the user has selected a file to upload   Edit  bumped

User · Answer

In Firefox at least  the DOM inspector is telling me that the File input elements have a property called files  You should be able to check its length   document getElementById  myFileInput   files length

User · Answer

I got this from some forum  I hope it will be useful for you    lt script type  text javascript  gt   function validateFileExtension fld        if      bmp   gif   jpg   jpeg   i test fld value             alert  Invalid image file type                   fld form reset            fld focus                    return false                  return true       lt  script gt   lt  head gt    lt body gt   lt form    etc     onsubmit  return  validateFileExtension this fileField   gt   lt p gt   lt input type  file   name  fileField   onchange  return validateFileExtension this   gt    lt input type  submit  value  Submit  gt   lt  p gt   lt  form gt   lt  body gt

User · Answer

Building on Ravinders solution  this code stops the form being submitted  It might be wise to check the extension at the server-side too  So you don t get hackers uploading anything they want    lt script gt  var valid   false   function validate fileupload input element        var el   document getElementById  feedback        var fileName   input element value      var allowed extensions   new Array  jpg   png   gif        var file extension   fileName split      pop         for var i   0  i  lt  allowed extensions length  i                  if allowed extensions i   file extension                        valid   true     valid file extension             el innerHTML                   return                      el innerHTML  Invalid file       valid   false     function valid form         return valid     lt  script gt    lt div id  feedback  style  color  red   gt  lt  div gt   lt form method  post  action   image  enctype  multipart form-data  gt     lt input type  file  name  fileName  accept   jpg  png  bmp  onchange  validate fileupload this     gt     lt input id  uploadsubmit  type  submit  value  UPLOAD IMAGE  onclick  return valid form      gt   lt  form gt

User · Answer

My function will check if the user has selected the file or not and you can also check whether you want to allow that file extension or not   Try this      lt input type  file  name  fileUpload  onchange  validate fileupload this value      function validate fileupload fileName        var allowed extensions   new Array  jpg   png   gif        var file extension   fileName split      pop   toLowerCase       split function will split the filename by dot     and pop function will pop the last element from the array which will give you the extension as well  If there will be no extension then it will return the filename       for var i   0  i  lt   allowed extensions length  i                  if allowed extensions i   file extension                        return true     valid file extension                      return false

User · Answer

Check it s value property   In jQuery  since your tag mentions it        fileInput   val     Or in vanilla JavaScript   document getElementById  myFileInput   value

User · Answer

Simple and powerful way dynamic validation  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

[javascript] How to validate a file upload field using Javascript/jquery

Examples related to javascript

Examples related to jquery