How to implement validation for input type file using jQuery or javascript?

There are various ways to validate file input using javascript/jQuery

1. You can simply validate by checking $("#FileInput").val() == ""
   

   if($("#FileInput").val() == "")
   {
     //alert value cannot be null
   }?

2. Using jQuery Validate plugin
   

   $.validator.addMethod('filesize', function(value, element, param) {
      return this.optional(element) || (element.files[0].size <= param) 
   });    
   
   $('#form').validate({
           rules: {
               firstname: {
                   minlength: 6,
                   required: true
               },
   
               file: {
                   required: true, 
                   extension: "png|jpeg|jpg",
                   filesize: 1048576,   
               }
           },
           messages: 
              { 
               file: "File must be JPEG or PNG, less than 1MB" 
              },
           highlight: function(element) {
               $(element).closest('.form-group').addClass('has-error');
           },
           unhighlight: function(element) {
               $(element).closest('.form-group').removeClass('has-error');
           },
          
           errorPlacement: function(error, element) {
               if(element.parent('.input-group').length) {
                   error.insertAfter(element.parent());
               } else {
                   error.insertAfter(element);
               }
           }
       });
   ?

   HTML of above Code can be as below

   <form id="form" enctype="multipart/form-data">
       <div class="form-group">
           <label class="control-label" for="firstname">First:</label>
           <div class="input-group">
               <input class="form-control"  name="firstname" type="text" />
           </div>
       </div>        
       
           <div class="form-group">
           <label class="control-label" for="file">Image:</label>
           <div class="input-group">
               <input  id="file" name="file" type="file" />
           </div>
       </div>
       
       
           <button type="submit" class="btn btn-primary">Submit</button>
   </form>

3. using jQuery to place the required attribute in all input type="file" fields of the page
   

   $('input[name^="fileupload"]').each(function () {
       $(this).rules('add', {
           required: true,
           accept: "image/jpeg, image/png"
       })
   })?

   Fiddle link

Anyone of the above solution should work.

Above solution is excellent, but if you want to validate input and check file size at same time, here is custom jquery validation function for it

function validate()
{
  var file = $('#file').val(); 

  if (file == "") {  
    alert("select file"); //alert when no file is selected
    return false;          
  }
  else
  { 
     /* get file size in MB */  
     var file_size = $('#file')[0].files[0].size / 1024 / 1024; 

     //check if file size is greater than 2MB
     if(file_size > 2) {  
       alert("File size is greater than 2MB"); return false; 
     }
     else
     {
       //submit form
     }
  } 

}

Here is the working fiddle https://jsfiddle.net/g6wstmkz/

Thanks