在 WordPress 中通过 AJAX 上传文件的问题答案

【问题标题】：Issue uploading file via AJAX in WordPress在 WordPress 中通过 AJAX 上传文件的问题
【发布时间】：2018-12-18 18:52:10
【问题描述】：

知道有一些关于这个主题的问题，我今晚大部分时间都在搜索它们，试图找到解决我问题的方法。这是我第一次从事这样的工作。

我正在尝试通过 WordPress 中的 AJAX 上传文件。我已经在 WordPress 中设置了 AJAX，并且连接工作正常，直到我尝试传递表单数据，在该阶段我收到“错误请求”错误并且除此之外没有其他信息。

WordPress中的AJAX回调函数很简单：

add_action( 'wp_ajax_nopriv_calendar_process', 'calendar_process' );
add_action( 'wp_ajax_calendar_process', 'calendar_process' );

function calendar_process() {
    echo "worked";
    die();
}

我的前端表单如下所示：

<form method="post" class="custom-cal-form">
        <input type="file" accept=".ics" name="custom-calendar" id="custom_cal_file" />

        <button class="submit-ajax">Update Calendars</button>
    </form>

我的 AJAX 调用如下所示：

jQuery( document ).on( 'click', '.submit-ajax', function(e) {

        e.preventDefault();

        var file_data = jQuery('#custom_cal_file').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);
        console.log(form_data);

        jQuery.ajax({

            url : calendarprocess.ajax_url,
            type : 'post',
            processData: false,
            contentType: false,
            data : {
                action : 'calendar_process',
                post_id : 'test',
                calendar : form_data
            },
            success : function( response ) {
                jQuery('.ajax-response').html( response );
            }
        });

    });

我最初得到了错误

只能在 FormData 的实例上调用 FormData.append

直到我查看了一些问题并添加了

过程数据：假，内容类型：假，

到我的表单，现在我得到的完整错误是：

加载资源失败：服务器响应状态为 400 （错误请求）

这当然表明 WordPress 不高兴。

真的希望有人可以对此添加一些见解吗？提前致谢。

【问题讨论】：

标签： php ajax wordpress

【解决方案1】：

不熟悉 WordPress，但听起来您的网址不好。如果您要连接这两个“变量”？一起， ”。”在 Javascript 中无效。您正在寻找“+”。看不到这些是在哪里启动的，所以如果这是 WP 特定的东西，请忽略它，哈哈。

我要调试的第一件事是将地址硬编码到您首先调用的页面。 IE。 “测试/test.php”。这至少会告诉你它是否是一个有效的地址。

【讨论】：

谢谢，它并不真正适用于 WordPress，因为 WordPress 处理 AJAX 调用，AJAX url 被本地化在 functions.php 中。在我尝试传递表单数据之前，代码运行良好，因此问题似乎与此有关。

【解决方案2】：

您在表单中错过了enctype="multipart/form-data"，因此请尝试添加它。

<form method="post" class="custom-cal-form" enctype="multipart/form-data">

【讨论】：

谢谢，我已经添加了这一点 - 不幸的是仍然是同样的问题......