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

Question

我有一个带有文件类型输入的表单。我希望能够在 JavaScript/jQuery 中捕获附加到此输入的图像，并将其传递给我的 PHP 函数，然后上传到我的 WordPress 媒体。media_handle_upload()根据文档，使用 WordPress函数需要将$_FILES文件发送的数组的索引作为第一个参数。到目前为止，这是我的尝试：超文本标记语言<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);        }    });});PHPadd_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

Answer 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);

        }

    });

});