javascript - 通过ajax post发送文件和表单数据

Question

我正在尝试通过 ajax 上传文件以及表单中的某些字段。但是，它不起作用。我收到此错误。

Undefined Index :- File

这是我的代码。

HTML

<!-- File Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="file">Upload Software / File</label>
  
  <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="price">Price($)</label>
  
  <div class="col-md-4">
    <input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required="">
  </div>
</div>

Ajax

$("#add_product").click(function(e) {
  e.preventDefault();
  product_name = $("product_name").val();
  //d = $("#add_new_product").serialize();
  
  $.ajax({
    type: 'POST',
    url: 'ajax.php',
    data: $("#add_new_product").serialize(),
    success: function(response) {
      //
      alert(response);

    }
  })
});

PHP

if (0 < $_FILES['file']['error']) {
  echo ":!";
} else {
  echo "ASa";
}

我在这里错过了什么？

Answer 1

你能尝试使用 FormData() 吗:

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

以上是示例代码，您可以根据它进行修改。