Sometimes we need to apply validations on file-size and file-type of a file while uploading. We can check this by attaching a function to the "change" event.

Examlpe:

<input type="file" name="uploadFile" id="uploadFile" class="upload" title="Choose a file to upload"> 
<span id="fileName_error"></span>


<script>
$('#uploadFile').bind('change', function() {
              handleUpload();
          });

function handleUpload(){

          if($('#uploadFile').val() !='')
          {
              if($('#uploadFile').val().indexOf('.')>=0){
                  var ext = $('#uploadFile').val().split('.').pop().toLowerCase();
                  if($.inArray(ext, ['jpeg','jpg','png','gif','tiff']) != -1) {

                      var size = $('#uploadFile')[0].files[0].size/1024/1024;
                      if(size > 3)
                      {
                          $('#fileName_error').text('Please upload the file less than 3MB.');
                          return false;
                      }
                      $('#fileName_error').text('');
                      return true;
                  }
              }
              $('#fileName_error').text('Please upload the valid file(e.g jpeg,jpg,png,gif,tiff).');
              return false;
          }
          else
          {
              return true;
          }   
      }

</script>

Hope this will help you :)