如何获取ajax文件上传的图像值

时间:2017-10-10 16:16:32

标签: jquery html ajax

我正在尝试上传AJAX文件。问题是它将所有输入,textarea,select等值发送到服务器,但是当我回显它时,它不会将type="file"值发送到服务器。可能是什么原因?

<form role="form" enctype="multipart/form-data" id="postData">
  <div class="box-body">
    <div class="form-group col-xs-12 col-md-6">
      <label>Select Post Category</label>
      <select id="post-category" name="post-category" class="form-control" required>
        <option selected disabled value="">Select a Post Category!</option>
        <?php $post->listCategories(); ?>
      </select>
    </div>
    <div class="form-group col-xs-12 col-md-6">
      <label>Enter Post Title</label>
      <input type="text" name="post-title" required id="post-title" class="form-control">
    </div>
    <div class="form-group col-xs-12 col-md-12">
      <label>Enter Post Content</label>
      <textarea class="form-control" name="post-content" id="post-content" rows="10" placeholder="Start Typing Here...">
      </textarea>
    </div>
    <div class="form-group col-xs-12 col-md-12">
      <label>Select Image For Post</label>
      <input class="btn btn-primary" style="outline: none;" required="true" type="file" accept="image/*" multiple name="img[]" id="image" />
      </textarea>
    </div>
  </div><!-- /.box-body -->
  <div class="box-footer">
    <div class="message text-center"></div>
    <button type="submit" id="post-create" class="col-xs-12 col-md-4 col-md-offset-4 btn btn-success">Create Post</button>
  </div>
</form>
$("body").on("click keypress", "#post-create", function() {
  var formArray = [],
    formData = {};

  formData.category = $("#post-category").val();
  formData.title = $("#post-title").val();
  formData.content = $("#post-content").val();
  formData.file = $("#image").val();
  formArray.push(formData);

  var form = new FormData($('#postData')[0]);

  if (formData.category != "" && formData.title != "" && formData.content != "" && formData.file != "") {
    $("#post-create").addClass('disabled');
    $("#post-create").html("<img class='loader' src='assets/img/loader.gif'>");
    $(".message").html("Please Wait While Processing Request!").addClass('warning-message');

    $.ajax({
      url: 'AddRequestHandler.php?id=insertPost',
      type: "POST",
      data: form,
      cache: false,
      contentType: false,
      processData: false,
      success: function(resp) {
        if (resp == "success") {
          $("#post-create img").remove();
          $("#post-create").removeClass('disabled').html("").text("Create Category");
          $(".message").text("Category Created Successfully!").addClass('success-flash').slideDown('fast');
          $(".box-primary form").trigger("reset");
          setTimeout("$('.message').slideUp('slow');", 2000);
          resp == "";
        } else if (resp == "failed") {
          $("#post-create img").remove();
          $("#post-create").removeClass('disabled').html("").text("Create Category");
          $(".message").text("Connection Error Please Try Again!").addClass('error-message');
          $(".box-primary form").trigger("reset");
          setTimeout("$('.message').slideUp('slow');", 1000);
          resp = "";
        } else {
          console.log(resp);
        }
      },
      error: function(data) {}
    });
  } else {
    $(".message").text("Please Enter Data in All Fields!").addClass('error-message');
    setTimeout("$('.message').slideUp('slow');", 4000);
  }
});

0 个答案:

没有答案