如何使用 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);

        }

    });

});

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

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