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.