posting picture using jquery but can't get proper way to get picture element value

Question

here is my html code

  WELCOME Registration<br/>
  <strong>Select File to UPLOAD </strong>
  <input type="file" name="file" id="file" ><br/><br/>
  <input type="submit" id="sub" value="Registration">
  
  <div id="result">
  </div>

and this is my jquery code to get that image element

   <script>
   
  $(document).ready(function(){
  $("#sub").click(function(){
  //--------------------
  var fd = new FormData();   
  var file = $("#file");
  //fd.append('file', value );
  //problem is the above code is not working giving error and not uploading picture
  //test.php is working fine , when i echo image then it show empty mean
  //picture is not post to test.php is something wrong i'm doing 
  $.ajax({
    url: 'test.php',
    data: fd,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
    alert(data);
    }
  });
  //----------------------
 
  });
  });
 </script> 

problem is the above code is not working giving error and not uploading picture test.php is working fine , when i echo image then it show empty mean picture is not post to test.php is something wrong i'm doing