upload photo using $.ajax

upload photo using $.ajax

my target is upload an image on server directly without submit button and in the same time show the preview. 

my html:
  1.    <form id='userPhoto' name='userPhoto' method="post" enctype="multipart/form-data">
  2.             <div class="profile-info">
  3.                 <div class="profile-photo">
  4.                     <div class="image-upload">
  5.                         <div class="image-upload">
  6.                             <label for="fileToUpload">
  7.                                 <img id='image' src="{{url('assets/globals/img/faces/9.jpg')}}" alt=''/>
  8.                             </label>
  9.                             <input type="file" name="fileToUpload" id="fileToUpload">
  10.                         </div>
  11.                     </div>
  12.     <!--                <img src="{{url('assets/globals/img/faces/9.jpg')}}" alt="">-->
  13.                 </div><!--.profile-photo-->
  14.                 <div class="profile-text light">

  15.                     Tolga Ergin
  16.                     <span class="caption">Account id: 123456</span>

  17.                 </div><!--.profile-text-->

  18.             </div><!--.profile-info-->

  19.         </form>
this is my js
  1. $(document).ready(function () {
  2.       function readURL(input) {
  3.         if (input.files && input.files[0]) {
  4.             var reader = new FileReader();
  5.             reader.onload = function (e) {
  6.                 $('#image').attr('src', e.target.result);
  7.             };
  8.             reader.readAsDataURL(input.files[0]);
  9.         }
  10.         
  11.     }
  12.     
  13.     $("#fileToUpload").change(function(){
  14.        readURL(this);
  15.        $.ajax({
  16.         url: "../upload.php",
  17.         type: "POST",         
  18.         data:new FormData(this), 
  19.         contentType: false,      
  20.         cache: false,             
  21.         processData:false,       
  22.         success: function(data)  
  23.             {
  24.             ......}
  25. });
  26.   
  27.     });
  28. });

I can show the preview of the image, but to the php script  ajax don't pass data, I try also with data: $('#userPhoto).serialize() without success. 
how I can perform my target?