文件上传无法使用 AJAX

Question

i am using ajax in fileupload see here ,while using fileupload value is not passing into one page(upload.php) to another page(file_upload_submit.php) .i don't know how to get the file value using 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

u can try this

<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>

and for 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']);
    }





?> 

hope it help