如何在Jquery中获取文件值并在AJAX中传递值

时间:2016-09-30 04:14:43

标签: javascript php jquery html

这里我想在数据库中插入值,这里是普通值,如名称,电子邮件,区域......这个值得到和之后通过AJAX传递并进行插入部分,但文件上传时我无法获得consloe.log(file);我变得像这样 C:\ fakepath \ Penguins.jpg 我不知道如何解决这个问题,我想获取文件值并传入下一页thrugh AJAX并转到tmp文件夹怎么做。



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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

你无法通过像这样的ajax上传文件,你需要元数据,而不是json对象,你可以像下面这样编码ajax: -

// 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
    }
} );

答案 1 :(得分:0)

如果您想要文件的价值,请使用 - JsonResponse

但如果您想要文件,请使用 - var file = $("#file").val();

此外,如果您想使用ajax传递文件,请使用jquery var file = $("#file").get(0).files[0];,如:

FormData()

答案 2 :(得分:0)

尝试使用表单数据对象而不是字符串

data:  new FormData('#formid'),

将此替换为上面的行

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