javascript - 尝试使用 AJAX 发送 FormData 时表单数据未通过？

Question

这个问题已经有答案了:

jQuery AJAX file upload PHP (5 个回答)

已关闭 6 年前。

更新

既然John Conde提出了这个建议，我将尝试更准确地描述我的问题。

在ma​​in.js中，我试图将我的表单对象发送到addevent.php提交后。我的方法是选择表单对象并创建 FormData对象并将其发送至 addevent.php使用 AJAX:

$("form[name='add-event-form']").submit(function(e){
        e.preventDefault();
        var title = $(this).find("input[name='title']").val();
        var start_date = $(this).find("input[name='start_date']").val();
        var start_time = $(this).find("input[name='start_time']").val();
        var end_date = $(this).find("input[name='end_date']").val();
        var end_time = $(this).find("input[name='end_time']").val();
        var place = $(this).find("input[name='place']").val();
        var description = $(this).find("input[name='description']").val();
        var file = $(this).find("input[name='file']")[0].files[0];
        var fileData = new FormData();
        fileData.append('file', file);
        var data = {title: title, start_date: start_date, start_time: start_time,
                    end_date: end_date, end_time: end_time, place: place,
                    description: description, file: fileData};
        console.log(data);
        if(title && start_date && start_time){
          var event_form = $.ajax({
            url: 'ajax/addevent.php',
            method: 'POST',
            processData: false,
            contentType: false,
            data: data,
            dataType: 'json',
            error: function (error){
              console.log(error);
            },
            success: function (json){
              console.log(json);
            },
            complete: function (jqXHR, textStatus) {
              console.log(`AJAX thinks login request was a ${textStatus}`);
            }
          });
        }

但是，我知道没有任何事情发生，因为我从 AJAX 调用返回的对象有以下错误:

我知道我的data我在 AJAX 中发送的对象电话已填写，我已将其打印出来:

很明显，我的data对象没有发送到我的 addevent.php因为某些原因。我认为这是 processData: false, contentType: false 的 b/c 。我这样做的原因是 b/c 我正在尝试在我的 addevent.php 中上传文件。和 this post说到做到processData: false, contentType: false在我的 AJAX 调用中。

如果您知道我做错了什么，请告诉我，谢谢!

代码

addevent.php

<?php
session_start();
require_once '../config-db.php';

//Set up SQL
$query = "INSERT INTO events (title, start_date, start_time, end_date, end_time, place, description)
          VALUES (:title, :start_date, :start_time, :end_date, :end_time, :place, :description)";
$fields = array('title', 'start_date', 'start_time', 'end_date', 'end_time', 'place', 'description');
$stmt = $db->prepare($query);

//Set up return
$error['error'] = array();

//N2SELF: N2Do DATA VALIDATION
if(!empty($_FILES['file'])){
  $image=$_FILES['file'];
  $file_name=$_FILES['file']['name'];
  $image_tmp =$_FILES['file']['tmp_name'];
  if($_FILES['file']['error'] === 0){
    $file_path = "images/";
    $move_successfully = move_uploaded_file( $image_tmp, $file_path.$file_name);
    if(!$move_successfully){
      $error['error'][] = "$image_tmp was not moved successfully";
    }
    $_SESSION['photos'][] = $file_name;
    $error['error'][] = "$image_tmp was moved successfully";
  }
}

foreach($fields as $field){
  if($field === 'title' || $field === 'start_date' || $field === 'start_time'){
    if(empty($_POST[$field])){
      $error['error'][] = "No required field: $field";
    }
  }

  if($field === 'title'){
    $value = (!empty($_POST[$field])) ? $_POST[$field] : "Untitled";
  }elseif($field === 'start_date'){
    $value = (!empty($_POST[$field])) ? $_POST[$field] : "NO DATE";
  }
  elseif($field === 'start_time'){
    $value = (!empty($_POST[$field])) ? $_POST[$field] : "NO TIME";
  }else{
    $value = (!empty($_POST[$field])) ? $_POST[$field] : NULL;
  }

  $parameter = ":$field";
  $paramToValues[$parameter] = $value;
}
$executed = $stmt->execute($paramToValues);
if(!$executed){
  $error['error'][] = "SQL query $query not executed";
  echo json_encode($error);
  exit();
}

foreach($fields as $field){
  $error['fields'][] = $_POST[$field];
}
echo json_encode($error);
?>

Answer 1

使用formData，在.submit()中使用this来引用当前表单。

$("form[name='event-form']").submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: 'ajax/addevent.php',
        type: 'POST',
        data: formData,
        dataType: 'json',
        error: function (error) {
            console.log(error);
        },
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        success: function (json) {
            console.log(json);
        },
        complete: function (jqXHR, textStatus) {
            console.log(`AJAX thinks login request was a ${textStatus}`);
        }
    });
});