如何使用 AJAX 提交表单数据文本和图像答案

【问题标题】：How to submit form data text and images using AJAX如何使用 AJAX 提交表单数据文本和图像
【发布时间】：2020-07-22 19:05:22
【问题描述】：

我正在尝试将图像数据从 Ajax 发送到 PHP，我已将表单 enc-type 设置为“multipart/form-data”。

它发送文本，但是，如何将文件发送到 .php 脚本？

线路，我发送的图片是

employee_picture = $("#employee_picture").val();

我认为我需要将 .val() 更改为其他内容，但是我没有解决问题的当前知识。

阿贾克斯：

<script>
    $(document).ready(function () {
        $("form").submit(function (event) {
            $("#create_employee").attr("disabled", true);
            event.preventDefault();
            var csrf_token = $("#csrf_token").val();
            var first_name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var title = $("#title").val();
            var dob = $("#dob").val();
            var other_information = $("#other_information").val();
            var gender = $("#gender").val();
            var address = $("#address").val();
            var address2 = $("#address2").val();
            var city = $("#city").val();
            var postal_code = $("#postal_code").val();
            var e_first_name = $("#e_first_name").val();
            var e_last_name = $("#e_last_name").val();
            var e_phone = $("#e_phone").val();
            var e_relationship = $("#e_relationship").val();
            var employee_picture = $("#employee_picture").val();
            var create_employee = $("#create_employee").val();
            $(".formMessage").load("/app/business/create_employee.php", 
            {
                csrf_token: csrf_token,
                first_name: first_name,
                last_name: last_name,
                email: email,
                phone: phone,
                title: title,
                dob: dob,
                other_information: other_information,
                gender: gender,
                address: address,
                address2: address2,
                city: city,
                postal_code: postal_code,
                e_first_name: e_first_name,
                e_last_name: e_last_name,
                e_phone: e_phone,
                e_relationship: e_relationship,
                employee_picture: employee_picture,
                create_employee: create_employee
            });
        });
    });
</script>

另外，在 php 脚本中。如何使用 $_POST 或 $_FILES 访问它？谢谢！

【问题讨论】：

#employee_picture 是什么类型的 DOM 元素？是文件输入还是img标签等等
@akenion 是文件的输入类型

标签： php ajax

【解决方案1】：

您不想使用val 是正确的。您可以使用 FileReader API（假设浏览器支持允许）从文件输入中实际获取文件内容。详情见这个问题：Get data from file input in JQuery

您可以像现在一样传递该值，它将只是$_POST 数组服务器端可访问的表单数据中的字符串。通常，这将是一个 base64 编码的值。

如果您提交的是普通表单（不是通过 AJAX），则需要使用 $_FILES 数组。

此外，您可能希望使用$.ajax 或$.post 而不是$.load。我相信$.load 会在您真正想做 POST 时发出 GET 请求。

【讨论】：