formdata with jquery not working,server returns empty string

Question

I have gone through most of the responses from previous similar questions and tried, yet same result. There is no server error, data fields received by server are null.I am using form data.

$("#sbtn").onclick( function(){

  var url = "php/add.php";
  
  var fd = new FormData();
  
  fd.append('file',files[0]);

  fd.append('type',"music");

  fd.append('username', $("input[name=username]").val());

  $.ajax({
           type :"POST",
           url  : url,
           data : fd,
          contentType: false,
          processData: false,
           success : function(resp){ alert("server response : " + resp );}
       });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   

    <form onsubmit="return false;">
         
      <label for="username">Name</label>
      
      <input type="text" size="10" name="username">
      
      <input type="file" required />
      
      <input  type="submit" value="add" id="sbtn"/>
    
    </form>