如何使用Ajax同时上传数据和文件？

使用 Ajax 以一种形式上传数据和文件

以一个 Ajax 形式上传数据和文件是 Web 应用程序中的常见要求。这里有关于如何有效完成此任务的详细说明。

问题

尝试使用 Ajax 提交数据和文件可能会很棘手，因为它们的方式不同由 jQuery 处理。 $.serialize() 将数据收集到数组中，而表单文件需要使用 new FormData()。

组合方法

合并这些方法的关键正在使用 FormData 对象。 FormData 是一个内置构造函数，允许您创建表单数据对象。该对象可以保存数据和文件，非常适合我们的目的。

示例

要组合这两种方法，请使用以下代码：

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

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

在这种情况下，#datafiles 表单包含常规数据输入和文件输入。 new FormData(this) 行使用表单数据创建一个新的 FormData 对象。

PHP 脚本

在服务器端处理上传的数据和文件，使用如下 PHP 脚本：

<?php

print_r($_POST);
print_r($_FILES);

?>

使用此代码，您可以使用以下方式访问表单数据和上传的文件$_POST 和 $_FILES 超全局变量。

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