在Wordpress中上传Ajax文件-无法通过FormData

小编典典

在Wordpress中上传Ajax文件-无法通过FormData

ajax

我制作了一个脚本，该脚本使用$
.ajax和FormData将两个表单对象传递给PHP。一个表单对象是文本，另一个是文件。它作为独立脚本运行良好。但是，将其作为插件添加到Wordpress后，它一直给我"Uncaught TypeError: Illegal invocation"。

我不能序列化formdata，仅仅是因为那样我将无法将文件传递给PHP中的回调函数。

ajax调用之前涉及FormData的JS：

var fd = new FormData();
var file = jQuery(this).find('input[type="file"]');
var caption = jQuery(this).find('input[name=img_caption]');
var individual_file = file[0].files[0];
fd.append("file", individual_file);
var individual_capt = caption.val();
fd.append("caption", individual_capt);

上面的这一部分是100％正确的。

Ajax呼叫：

jQuery.ajax({
    type: 'POST',
    url: fiuajax.ajaxurl,
    data: {
        action: 'fiu_upload_file',
        security: fiuajax.security,
        data: fd,
        contentType: false,
        processData: false,
    },
    success: function(response){
        var dataObj = jQuery.parseJSON(response);
        if(dataObj.message == 'error') {
            jQuery('.fiu_validation').html('The following error occured: '+dataObj.desc);
        }
        else if(dataObj.message == 'success') {
            jQuery('.fiu_file').val('');
        }
        console.log(response);
    }
});

这令人难以置信，因为它在Wordpress之外效果很好。我曾尝试注销Wordpress的jQuery并加入最新的jQuery版本，但这没有什么区别。

回顾一下：
1）Ajax / jQuery拒绝将表单对象传递给PHP
2）无法序列化该对象，因为我需要保留文件对象
3）脚本在Wordpress之外运行
4）尝试更新到最新的jQuery版本，没变

阅读 286

2020-07-26

共1个答案

小编典典

试试这个：

jQuery(document).on('click', '#submit', function(e){
    e.preventDefault();

    var fd = new FormData();
    var file = jQuery(document).find('input[type="file"]');
    var caption = jQuery(this).find('input[name=img_caption]');
    var individual_file = file[0].files[0];
    fd.append("file", individual_file);
    var individual_capt = caption.val();
    fd.append("caption", individual_capt);  
    fd.append('action', 'fiu_upload_file');

    jQuery.ajax({
        type: 'POST',
        url: fiuajax.ajaxurl,
        data: fd,
        contentType: false,
        processData: false,
        success: function(response){

            console.log(response);
        }
    });
});

的PHP

function fiu_upload_file(){

    var_dump($_FILES);
    exit();
}

add_action('wp_ajax_fiu_upload_file', 'fiu_upload_file');
add_action('wp_ajax_nopriv_fiu_upload_file', 'fiu_upload_file');

2020-07-26