Question

意识到这个主题存在一些问题，我今晚大部分时间都在搜索它们，以寻求解决问题的方法。这是我第一次从事此类任务。

我正在尝试通过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

直到我环顾了一些问题并补充

processData：false， contentType：false，

对于我的表单，现在我得到的全部错误是：

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

这当然表明WordPress不满意。

真的希望有人可以对此有所了解吗？预先感谢。

Answer 1

不熟悉WordPress，但听起来您的URL不好。如果要连接这两个“变量”？一起，“。”在Javascript中无效。您正在寻找“ +”。没有看到它们的起始位置，因此，如果这是特定于WP的，请忽略它，大声笑。

我要调试的第一件事是硬编码您首先调用的页面的地址。即“ test / test.php”。至少可以告诉您该地址是否有效。

Answer 2

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

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

在WordPress中通过AJAX发布上传文件

2 个答案: