使用 jQuery 上传 WordPress ajax 文件答案

【问题标题】：WordPress ajax file upload with jQuery使用 jQuery 上传 WordPress ajax 文件
【发布时间】：2018-06-24 20:45:55
【问题描述】：

我对 admin-ajax.php 有一个简单的文件上传 ajax 请求。

var data = new FormData();
jQuery.each(jQuery('input[data-field=file]')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    success: function(data){
        console.log(data);
    },
    error: function() {
        console.log("Error");
    }
});

e.preventDefault();

现在，如果我将 ajax 请求发送到 admin-ajax.php 以外的任何地方（例如 /test.php），数据将正常传递。

问题是，admin-ajax.php 总是返回 0，因为它有以下几行：

if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

如果我尝试像这样传递数据（使用 processData: false）：

data: {
    action: 'cas_contact_form',
    data: data,
},

admin-ajax.php 仍然以 0 结束。

如果我删除 processData: false，我将收到 Uncaught TypeError: Illegal invocation 错误，我什至无法将数据发送给管理员- ajax.php。

到目前为止，这对我来说似乎是一个 catch22 问题。我错过了什么吗？

【问题讨论】：

好吧，您现在通过在数据对象中引入另一个 data 键，将其余数据“下移了一层”。但接收端可能期望数据字段和action 键在同一级别。在将输入字段添加到data 之后，改为使用data.append('action', 'cas_contact_form');，这应该可以工作。
好的，添加它作为答案。

标签： javascript php jquery ajax wordpress

【解决方案1】：

如果我尝试像这样传递数据（使用 processData: false）：
data: {
    action: 'cas_contact_form',
    data: data, }, admin-ajax.php still dies with a 0.

现在，您通过在数据对象中引入另一个 data 键，将其余数据“下移了一级”。但接收端可能希望数据字段和操作键处于同一级别。

但是您可以将这个附加参数附加到 FormData 对象，就像您已经添加输入字段一样：

data.append('action', 'cas_contact_form');

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

【讨论】：