时间戳

首页 > 解决方案 > 通过 ajax 发布表单数据和文件

jquery - 通过 ajax 发布表单数据和文件

问题描述

文本发布得很好，但文件没有发布。
我知道 mail-request.php 中的 php 正在工作，因为我使用 html 表单对其进行了测试。
这是我到目前为止所拥有的：

$(document).ready(function() {
  $('#btn-quote').click(function() {
    alert("WORKING");
    event.preventDefault();
    $.ajax({
      url: "mail-request.php",
      type: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      beforeSend: function() {
        $('#load').html('<img src="load2.gif" width="50">');
        $("#err").fadeOut();
      },
      success: function(data) {
        //alert("AJAX: "+data);
        var f_data = data;
        $('#status').text(f_data);
      },
      error: function(errorThrown) {
        $('#status').text("DIDN'T WORK!");
      }
    });
  });
});

这是表格：

<form id ="request-form" name="request-form" action="mail-request.php" method="POST" enctype="multipart/form-data">
<input id="upload" type="file" name="fileUpload" >
      <!--</div>--> 
    </div>
  </div>
  <div class="md-form">
    <div class="md-form">
      <label for="fname" class="request-label">First Name</label>
      <input type="text" id="fname" name="fname" class="form-control">
    </div>
  </div>
<div class="center-on-small-only"> <a class="btn btn-primary" id="btn-quote" onClick="validateRequestForm()">Submit Request</a> </div>
  <div class="status" id="status"></div>
</form>

标签： jqueryajaxforms

解决方案

您必须将表单传递给 FormData 对象的构造函数，就像在 div 单击处理程序中一样，您正在传递一个 DIV。
也只是为了确保事件变量可用，将其作为参数添加到事件处理函数

$(document).ready(function() {
  $('#btn-quote').click(function(event) {
    alert("WORKING");
    event.preventDefault();
    $.ajax({
      url: "mail-request.php",
      type: "POST",
      data: new FormData($('#request-form')[0]),
      contentType: false,
      cache: false,
      processData: false,
      beforeSend: function() {
        $('#load').html('<img src="load2.gif" width="50">');
        $("#err").fadeOut();
      },
      success: function(data) {
        //alert("AJAX: "+data);
        var f_data = data;
        $('#status').text(f_data);
      },
      error: function(errorThrown) {
        $('#status').text("DIDN'T WORK!");
      }
    });
  });
});

推荐阅读