Jquery post 文件和数据，一次 ajax 调用

Question

您好，我有一个 wordpress php class 可以接收我的 ajax 并且运行良好。现在我必须在我用来将参数传递给 PHP class 的相同 POST 请求中上传一个文件（我在 class 中有一个开关将我发送到基于 POST 数据中的参数的正确函数）。

这是代码：

$(document).ready(function (e) {


$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var userID = <?php echo get_current_user_id(); ?>; 
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    var data = {
            'action': 'romme_call',
            'whatever': 1234, 
            'userID': userID,
            'function_call': 'upload_profile_photo',
            **'form_data' : formData**
        };
         console.log(data);
        jQuery.post(ajaxurl, data, function(response) {
            console.log("done");
            console.log(data);
        });

这段代码当然会return一个"Uncaught TypeError: Illegal invocation"

因为它不接受 formData 作为数据中的参数。

我该如何处理？

Answer 1

它 returns Illegal invocation 因为 jQuery 正在尝试用 $.param 解析表单数据。

提交文件时必须关闭 jQuery 的 ajax 处理

$('#imageUploadForm').on('submit', (function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    var userID = <? php echo get_current_user_id(); ?> ;
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

    formData.append('action', 'romme_call');
    formData.append('whatever', '1234');
    formData.append('userID', userID);
    formData.append('function_call', 'upload_profile_photo');

    $.ajax({
        url  : ajaxurl,
        type : 'POST',
        data : formData,
        contentType: false,
        processData: false
    }).done(function(response) {
        console.log("done");
        console.log(data);
    });
});

Jquery post 文件和数据，一次 ajax 调用

Jquery post both file and data with one ajax call

javascript

php

ajax

jquery

image-uploading