fileupload не работает с использованием AJAX

Question

Я использую ajax в fileupload, см. here, при использовании значения fileupload не переходит на одну страницу (upload.php) на другую страницу (file_upload_submit.php) .i не знаю, как получить значение файла с помощью AJAX

upload.php

<form class="form-horizontal form-bordered" method="POST" id="newUserForm" enctype="multipart/form-data"> 
     <div class="form-group"> 
     <label class="col-md-3 control-label">First Name<span class="star_mark">&nbsp;*</span></label> 
    <div class="col-sm-6"> 
    <input class="form-control" id="fname" name="fname" value="" aria-required="true" required="" data-msg-required="Please enter your firstname" placeholder="Enter your firstname" type="text"> 
    </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-3 control-label">Photo Upload<span class="star_mark">&nbsp;*</span></label> 
     <div class="col-md-6"> 
      <div class="fileupload fileupload-new" data-provides="fileupload"> 
      <div class="input-append"> 
      <div class="uneditable-input"> 
      <i class="fa fa-file fileupload-exists"></i> 
      <span class="fileupload-preview"></span> 
      </div> 

      <span class="btn btn-default btn-file"> 
      <span class="fileupload-exists">Change</span> 
      <span class="fileupload-new">Select file</span> 
      <input type="file" id="file" name="file" value="" aria-required="true" required="" data-msg-required="Please select your file"> 
      </span> 
      <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a> 
      </div> 
      </div> 
     </div> 
    </div> 


    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-6"> 
    <button class="btn btn-info btn-block" type="submit" id="user-submit">Submit</button> 
    </div> 
    </div> 
</form> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#user-submit").click(function(event){ 
    event.preventDefault(); 
    if($("#newUserForm").valid()){ 
    //console.log("success"); 
    $.ajax({ 
     type:'POST', 
     url :"php/file_upload_submit.php", 
     data: $('form#newUserForm').serialize(), 
     success: function(data) { 
     console.log(data);// i am getting **Error** here 
     }, 
     error:function(exception){ 
     alert('Exeption:'+exception); 
     } 
    }); 
    }else{ 
    console.log("false"); 
    } 
}); 
}); 

**file_upload_submit.php** 

<?php 
$fstname=$_POST['fname'];// i got answer here 

$filename = basename($_FILES['file']['name']);// i am not getting filename here 
$extension = pathinfo($filename, PATHINFO_EXTENSION); 
$new_name= md5($filename.time()).'.'.$extension; 
if (move_uploaded_file($_FILES['file']['tmp_name'], "upload/".$new_name)) { 
echo "success"; 
}else{ 
echo "Error"; 
} 
?> 

Answer 1

и можно попробовать это

<input id="sortpicture" type="file" name="sortpic" /><br> 
    <input type='button' class="jos" value='upload' name='upload'> 


<script src="jquery-2.2.1.js"></script> 
<script> 
$(document).ready(function(){ 

    var file_data = $('#sortpicture').prop('files')[0]; 
    var form_data = new FormData();     
    form_data.append('file', file_data); 
    alert(form_data); 

/*for ajax upload*/  
    $.ajax({ 
       url: 'upload.php', // point to server-side PHP script 
       dataType: 'text', // what to expect back from the PHP script, if anything 
       cache: false, 
       contentType: false, 
       processData: false, 
       data: form_data,       
       type: 'post', 
       success: function(php_script_response){ 
        alert(php_script_response); // display response from the PHP script, if any 
       } 


     }); 


}); 
</script> 

и upload.php

<?php 


    if (0 < $_FILES['file']['error']) { 
     echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } 
    else { 
     move_uploaded_file($_FILES['file']['tmp_name'], 'img/' . $_FILES['file']['name']); 
    } 





?> 

надеюсь, что это поможет