当前位置: 首页 > 面试题库 >

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

桑飞语
2023-03-14
问题内容

我制作了一个脚本,该脚本使用$
.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版本,没变


问题答案:

试试这个 :

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


 类似资料:
  • 问题内容: 我使用2个文件index.js,upload.php尝试通过ajax上传文件(img),如果成功追加到div 。 但是它不起作用,有几个问题,下面我的代码有什么建议吗? 谢谢。 upload.php 1. 还需要添加吗? 2. 并检查$ _FILES的大小或tmp_name是否仍使用? index.js 3.这几行是对的吗? 4.我错过或错了什么吗? 问题答案: 在其构造函数中接受一个

  • 我有一个多文件上传表单: 我用ajax发布这些文件。我想一个接一个地上传选定的文件(为了创建单独的进度条,出于好奇)。 我可以通过以下方式获得文件列表或单个文件: 耶林 但是FileList是不可变的,我不知道如何提交单个文件。 我认为这是可能的,正如我所看到的http://blueimp.github.com/jQuery-File-Upload/.我不想使用这个插件,因为它与学习和结果一样重要

  • 本文向大家介绍通过Ajax使用FormData对象无刷新上传文件方法,包括了通过Ajax使用FormData对象无刷新上传文件方法的使用技巧和注意事项,需要的朋友参考一下 写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,对兼容性比较敏感的网站慎用。 在工作中

  • 问题内容: 我有多个文件上传表单: 我正在用ajax发布这些文件。我想一个接一个地上传所选文件(以创建单独的进度条,并且出于好奇)。 我可以通过以下方式获取文件列表或单个文件 耶陵 但是FileList是不可变的,我不知道如何提交单个文件。 我认为这是可能的,因为我看到了http://blueimp.github.com/jQuery-File- Upload/ 。我不想使用这个插件,因为它既要学

  • 问题内容: 我想使用Ajax通过模式上传文件。我怎样才能做到这一点? 我的模态: 这是我的JavaScript文件: 这是我的控制器: 但它返回错误500。我认为Ajax不接受使用Bootstrap模式的文件上传。 问题答案: 您可以像这样通过ajax使用引导程序模式上载文件。 在表单标签中,使用属性enctype和html如下所示: js代码: 在您的控制器端,您可以执行以下功能来上传图像。

  • 问题内容: 我写了一个wordpress插件,在模板中添加了一些注释功能。通过ajax,所有内容都应传输到wordpress数据库中。 问题是-ajax处理程序需要一个php文件,用于通过捕获查询 在用户传输查询时,ajax处理程序将如下所示调用php文件: 该 getvars.php 不知道WordPress的环境,因为它是由用户直接调用提交,我想补充的WordPress的环境类,包括是不是好作