使用 Ajax 和 FormData 实现文件上传及文本数据提交-php教程-PHP中文网

使用 Ajax 和 FormData 实现文件上传及文本数据提交

DDD

发布： 2025-10-16 13:13:01

原创

153人浏览过

使用 ajax 和 formdata 实现文件上传及文本数据提交

本文档旨在解决在使用 Ajax 和 FormData 进行文件上传时，同时提交文本输入数据遇到的常见问题，例如 PHP 端无法获取 `$_POST` 和 `$_FILES` 数据。我们将详细介绍如何正确配置 HTML 表单、JavaScript 代码以及 PHP 后端，以实现完整的文件和文本数据上传功能。

HTML 表单配置

首先，确保你的 HTML 表单正确设置了 enctype 属性，并且 name 属性在表单中是唯一的。enctype="multipart/form-data" 是文件上传的关键。

<form name="usrupload" method="POST" enctype="multipart/form-data">
  <label class="form-label text-start">Enter your Name
      <input class="form-control" name="name" type="text" placeholder="John" />
  </label>

  <label class="form-label">Title
      <input class="form-control" type="text" name="title" placeholder="Operator" />
  </label>

  <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
      <input class="form-control"  name="file" type="file" />
  </label>

  <input type='button' name='bttn' value='Submit' />
</form>

登录后复制

注意事项：

确保每个 input 元素都有唯一的 name 属性。
label 元素应该通过 for 属性或直接包裹 input 元素来关联。

JavaScript (jQuery) 代码

使用 JavaScript (jQuery) 创建 FormData 对象，并将表单数据添加到其中。然后，使用 Ajax 发送 FormData 对象。

const form = document.forms.usrupload;

form.bttn.onclick = () => {
  var form_data = new FormData(form);
  $.ajax({
    type: 'POST',
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    url: 'save_data.php',
    data: form_data,
    success: function(data) {
      alert(data)
      window.location = 'account.php';
    }
  });
}

登录后复制

关键点：

contentType: false 和 processData: false 是必须的，因为 FormData 对象会自动处理 Content-Type。
直接将 form_data 对象作为 data 属性的值传递给 Ajax 请求。
使用 new FormData(form) 可以直接将整个表单的数据添加到 FormData 对象中。

PHP 后端代码

在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

<?php

$name = $_POST['name'];
$title = $_POST['title'];
$file = $_FILES['file'];

// 其他处理文件和数据的代码
?>

登录后复制

注意事项：

确保在访问 $_FILES 之前，检查文件是否成功上传。
进行适当的文件类型和大小验证，以确保安全性。
使用 move_uploaded_file() 函数将上传的文件移动到服务器上的安全位置。

完整示例

HTML:

<form name="usrupload" method="POST" enctype="multipart/form-data">
  <label class="form-label text-start">Enter your Name
      <input class="form-control" name="name" type="text" placeholder="John" />
  </label>

  <label class="form-label">Title
      <input class="form-control" type="text" name="title" placeholder="Operator" />
  </label>

  <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
      <input class="form-control"  name="file" type="file" />
  </label>

  <input type='button' name='bttn' value='Submit' />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const form = document.forms.usrupload;

form.bttn.onclick = () => {
  var form_data = new FormData(form);
  $.ajax({
    type: 'POST',
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    url: 'save_data.php',
    data: form_data,
    success: function(data) {
      alert(data)
      window.location = 'account.php';
    }
  });
}
</script>

登录后复制

PHP (save_data.php):

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $title = $_POST['title'];

    if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
        $file = $_FILES['file'];
        $filename = $file['name'];
        $filetmpname = $file['tmp_name'];
        $filesize = $file['size'];
        $filetype = $file['type'];

        // 移动上传的文件到指定目录
        $upload_dir = "uploads/"; // 确保该目录存在且可写
        $filepath = $upload_dir . $filename;

        if (move_uploaded_file($filetmpname, $filepath)) {
            echo "File uploaded successfully!";
        } else {
            echo "Error uploading file.";
        }
    } else {
        echo "No file uploaded or error during upload.";
    }

    echo "Name: " . $name . "<br>";
    echo "Title: " . $title . "<br>";
} else {
    echo "Invalid request method.";
}

?>

登录后复制

总结：

通过正确配置 HTML 表单的 enctype 属性，使用 JavaScript 创建 FormData 对象，并设置 Ajax 请求的 contentType 和 processData 属性为 false，可以成功地将文件和文本数据一起上传到服务器。在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。记住进行适当的验证和错误处理，以确保应用程序的安全性。

以上就是使用 Ajax 和 FormData 实现文件上传及文本数据提交的详细内容，更多请关注php中文网其它相关文章！