fileupload is not working in twitter bootstrap

Question

I am using twitter bootstrap file upload, i want to store the image on databese and also i want to move in one folder,i spent lot of times, i can't get the file name value. see here enter firstname and select one image after submit the form ,now i got first name value but i cant get photo upload value...

<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 type="text" class="form-control" id="fname" name="fname" value="" aria-required="true" required="" data-msg-required="Please enter your firstname" placeholder="Enter your firstname">

                          </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">
                      </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/register-newuser.php",
                     data: $('form#newUserForm').serialize(),
                     success: function(data) {
                        //var res=jQuery.parseJSON(data);// convert the json
                        console.log(data);

                     },
                     error:function(exception){
                     alert('Exeption:'+exception);
                    }
                  }); 

                     }
                else{

                  console.log('please select all fields');

                }
                });
              });
            </script>

register-newuser.php

$fstname=$_POST['fname'];// i got ans here
$filename  = basename($_FILES['file']['name']);
$newuser = array("fstName" => $fstname,'photoname' => $filename);
echo json_encode($newuser);
print_r($_FILES)//means nothing will happen, i didn't get any value like filename,size,extension....

Answer 1

To make an upload with AJAX you can use a jQUery plugin, for example this one . Bootstrap has nothing to do with upload.