在Wordpress中上传Ajax文件-无法通过FormData [英] Ajax file upload in Wordpress - can't pass FormData
问题描述
我制作了一个脚本,该脚本使用$ .ajax和FormData将两个表单对象传递给PHP.一个表单对象是文本,另一个是文件.
它作为独立脚本运行良好.但是,当我将其作为插件添加到Wordpress后,它一直给我"Uncaught TypeError: Illegal invocation"
.
I've made a script which uses $.ajax and FormData to pass two form objects to PHP. One form object is a text and the other is a file.
It worked well as a stand-alone script. However, after I added it to Wordpress, as a plugin, it keeps giving me "Uncaught TypeError: Illegal invocation"
.
我不能序列化表单数据,仅仅是因为那样一来,我将无法将文件传递给PHP中的回调函数.
I can't afford to serialize the formdata, simply because then I won't be able to pass the file to the callback function in PHP.
在ajax调用之前涉及FormData的JS:
JS involving FormData before ajax call:
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%正确的.
This part above is 100% correct.
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版本,但这没什么区别.
This is incredibly frustrating since it worked perfectly fine outside of Wordpress. I've tried de-registering Wordpress' jQuery and enqueueing the latest jQuery version, but it made no difference.
回顾:
1)Ajax/jQuery拒绝将表单对象传递给PHP
2)无法序列化对象,因为我需要保留文件对象
3)脚本在Wordpress之外运行
4)尝试更新到最新的jQuery版本,无变化
To recap:
1) Ajax/jQuery is refusing to pass a form object to PHP
2) Can't serialize the object because I need to preserve the file object
3) Script works outside of Wordpress
4) Tried updating to the newest jQuery version, no change
推荐答案
尝试一下:
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');
这篇关于在Wordpress中上传Ajax文件-无法通过FormData的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!