How to send FormData objects with Ajax-requests in jQuery?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <input type="file" id="image" name="image" accept="Image/*" />
   <input type="text" id="name" name="name" value="">
  <input type="button" id="submit" name="" value="Upload" />



<script>
$('#submit').click(function (event) {
    event.preventDefault()
   var file = $('#image').get(0).files[0];
   var name=$('#name').val();
   var formData = new FormData();
   formData.append('file', file);
   formData.append('name', name);
   $.ajax({
       url: 'add.php',
       success: function (e) {
  alert(e);
         alert('Upload completed');
       },
       error: function (e) {
         alert('error ' + e.message);
       },
       // Form data
       data: formData,
       type: 'POST',
       //Options to tell jQuery not to process data or worry about content-type.
       cache: false,
       contentType: false,
       processData: false
    });
    return false;
});
</script>