如何使用 Ajax 以单一表单同时上传数据和文件？

使用 Ajax 在单个表单中上传数据和文件

使用 jQuery 和 Ajax 与表单交互时，通常提交以下任一内容数据或文件，但不能同时进行。当您需要上传两种类型的内容时，这可能会带来挑战。

问题说明

主要问题在于提交前收集数据和文件的方式不同。数据通常使用 .serialize() 方法进行序列化，而文件则使用 FormData 对象进行处理。

解决方案

通过以下方式以一种形式上传数据和文件Ajax，您可以利用 FormData 的强大功能。该对象允许您轻松组合两种类型的内容。操作方法如下：

<form>

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this); // Gather both data and files into a single FormData object

    $.ajax({
        url: window.location.pathname, // Your PHP endpoint URL
        type: 'POST',
        data: formData,
        success: function(data) {
            alert(data); // Output the response from your PHP script
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

PHP 脚本

在服务器端，您的 PHP 脚本将能够访问您提交的数据和文件。形式。您可以使用 $_POST 和 $_FILES 来检索此信息。

<?php
// Display contents of $_POST
print_r($_POST);

// Display contents of $_FILES
print_r($_FILES);
?>

结论

通过使用 FormData，您可以轻松地从单个提交数据和文件使用 Ajax 形成。这种方法简化了您的表单并提高了文件和数据管理的效率。

以上是如何使用 Ajax 以单一表单同时上传数据和文件？的详细内容。更多信息请关注PHP中文网其他相关文章！