如何使用 AJAX 将 HTML 表单文件传递给 PHP答案

【问题标题】：How to Pass HTML Form Files to PHP Using AJAX如何使用 AJAX 将 HTML 表单文件传递给 PHP
【发布时间】：2020-07-13 15:29:10
【问题描述】：

我有一个带有文件类型输入的表单。我希望能够在 JavaScript/jQuery 中捕获附加到此输入的图像并将其传递给我的 PHP 函数，然后上传到我的 WordPress 媒体。使用 WordPress media_handle_upload() 函数，根据 docs 需要将文件作为第一个参数发送的 $_FILES 数组的索引。

这是我目前的尝试：

HTML

<form id="company-logo-form" method="post" action="#" enctype="multipart/form-data">
    <input type="file" name="company_logo" multiple="false" id="logo-test"/>
    <input class="btn bg green" name="upload_company_logo" type="submit" value="Upload Image" />
</form>

Javascript

$('#company-logo-form').on('submit', function(e) {
    e.preventDefault();
    let logo = $('#logo-test').prop('files');

    $.ajax({
        url: ajax_url,
        type: 'POST',
        // dataType: 'html',
        data: {
            company_logo: logo,
            action: 'uploadCompanyLogo'
        },
        error: function(res) {
            console.log(res);
        },
        success: function(res) {
            console.log(res);
        }
    });
});

PHP

add_action('wp_ajax_uploadCompanyLogo', 'update_company_logo');

function update_company_logo() {
    $logo = $_POST['company_logo'];
    $attachment_id = media_handle_upload($logo, 0);
                
    echo $attachment_id;
}

使用此代码，当我提交表单时，我在控制台中收到以下 jQuery 错误：

Uncaught TypeError: Illegal invocation

【问题讨论】：

你有代码沙箱吗？您在哪一行出现错误？

标签： javascript php jquery wordpress forms

【解决方案1】：

尝试在 javascript 中使用FormData 以正确发送数据。

类似的东西：

$('#company-logo-form').on('submit', function(e) {
    e.preventDefault();
    let logo = $('#logo-test').prop('files')[0]; // Since 'files' is array.
    let formData = new FormData(); // Create a new form.
    formData.append('action', 'uploadCompanyLogo');
    formData.append('company_logo', logo);

    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: formData,
        contentType: false, // No content type headers.
        processData: false, // Do not process sent data.
        error: function(res) {
            console.log(res);
        },
        success: function(res) {
            console.log(res);
        }
    });
});

【讨论】：