How to get the file value in Jquery and pass value in AJAX

Question

Here I want insert the values in Database here normal value like name, email, area... This value getting and after that value passed in next through AJAX and doing insertion part but while file uploading I can't get consloe.log(file); I am getting like this C:\fakepath\Penguins.jpg I don't know how to resolve this,i want get the file value and pass in next page thrugh AJAX and move to tmp folder how can do.

function add_menu() {
  var name = $("#name").val();
  var address = $("#address").val();
  var area = $("#area").val();
  var file = $("#file").val();
  var gender = $("input[name=gender]:checked").val();

  var checkValues = $('input[name=fecility]:checked').map(function() {
    return $(this).val();
  }).get();

  if (name == '') {
    $("#span-error").html(' Fill Menu Name. ');

  } else if (gender == '') {
    $("#span-error").html(' Select Gender. ');

  } else if (area == '') {
    $("#span-error").html(' Fill area. ');

  } else if (checkValues == '') {
    $("#span-error").html(' Select Fecilities. ');

  } else {
    $.ajax({
      type: "POST",
      url: "ajax_add_menu.php",
      data: "name=" + name + "&area=" + area + "&address=" + address + "&gender=" + gender + "&checkbox=" + checkValues,
      success: function(data) { // alert(data);
        if (data == "success") {
          window.location = 'pg_details.php';
        }

      }
    });
  }
}

<form class="form-horizontal" role="form" id="formid" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label class="col-sm-2 control-label">Name<span class="require">*</span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" placeholder="Name" name="name" id="name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Area<span class="require">*</span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" placeholder="Area" name="area" id="area">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Address<span class="require">*</span>
    </label>
    <div class="col-sm-8">
      <textarea class="form-control" placeholder="Enter Address" name="address" id="address" style="min-height:100px;"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Room Standereds<span class="require">*</span>
    </label>
    <div class="col-sm-8" style="margin-top:10px">
      <?php $sqlf="SELECT * FROM pg_fecilitys" ; $resultf=m ysql_query($sqlf); while($rowf=m ysql_fetch_array($resultf)) { echo '<input type="checkbox" id="fecility" name="fecility" value="'.$rowf[ "f_id"]. '" required style="margin: 0px 2px 0px 18px;">'.$rowf[
      "f_name"]; } ?>
    </div>
  </div>



  <div class="form-group">
    <label class="col-sm-2 control-label">Gender<span class="require">*</span>
    </label>
    <div class="col-sm-8">
      <label class="radio-inline">
        <input type="radio" id="gender" name="gender" value="male">Male</label>
      <label class="radio-inline">
        <input type="radio" id="gender" name="gender" value="female">Female</label>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">PG Image<span class="require">*</span>
    </label>
    <div class="col-sm-8">
      <input type="file" class="form-control" placeholder="PG Image" name="file" id="file">
    </div>
  </div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="tcb">
        <label>
          <span id="span-error" style="color:#f00;"></span>
        </label>
      </div>
    </div>
  </div>
  <div class="form-actions">
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-primary" onclick="add_menu()">Submit</button>
        <!-- <button type="submit" class="btn">Cancel</button> -->
      </div>
    </div>
  </div>
</form>

Answer 1

If you want value of the file, use - var file = $("#file").val(); ,

But if you want file then use - var file = $("#file").get(0).files[0];

Also if you want to pass file with ajax, then use jquery FormData() like:

function add_menu() {

  var name = $("#name").val();
  var address = $("#address").val();
  var area = $("#area").val();
  var file = $("#file").val();
  var gender = $("input[name=gender]:checked").val();

  fd = new FormData();
  fd.append('file', $("#file").get(0).files[0]);
  fd.append('name ', name );
  fd.append('address', address);
  fd.append('area', area);
  fd.append('gender', gender);

 // remaining codes - checking and ajax

  ////

 $.ajax({
  type: "POST",
  url: "ajax_add_menu.php",
  data: fd,
  success: function(data) { // alert(data);
    if (data == "success") {
      window.location = 'pg_details.php';
    }

  }
});

Answer 2

You could not upload file via ajax like this you need metadata, instead of json object, you can code ajax like below:-

// have a look..
formdata= new FormData($('#formid')[0]);
// to console data you do it with just get method on form data like
console.log(formdata.get('file')); // for file
console.log(formdata.get('name')); // name will be displayed
$.ajax ( {
    method : 'POST',
    url : 'ajax_add_menu.php',
    data    : formdata,
    cache : false,
    processData: false,
    contentType: false,
    success : function ( data, textStatus, jqXHR ) {
        // do what ever in your success in code
    },
    error : function ( jqXHR, textStatus, errorThrown ) {
        // do what ever in failure
    }
} );

Answer 3

Try to using form data object instead of string

data:  new FormData('#formid'),

Replace this with above line

data: "name=" + name + "&area=" + area + "&address=" + address + "&gender=" + gender + "&checkbox=" + checkValues,