php - 如何使用ajax提交wordpress表单(文件和名称)

Question

这个问题已经有答案了:

How can I upload files asynchronously with jQuery? (34 个回答)

已关闭 6 年前。

我是一名新开发人员。我创建了一个用于数据插入 WP 仪表板的插件。我正在尝试将图像插入我的数据库中。我正在尝试在 WordPress 中使用 Ajax 进行表单提交。有我的代码。当我使用输入类型=文本时数据提交成功，但是当我使用输入类型=文件时数据未提交。我希望将所有数据插入我的数据库并将文件保存在上传文件夹中。

 <form  id="ajax_form" method="" action="<?php echo $_SERVER['REQUEST_URI']; ?> " enctype="multipart/form-data">
            <table class='wp-list-table widefat fixed'>
                <tr>
                    <th class="ss-th-width">Code</th>
                    <td><input type="text" name="code" value="<?php echo $code; ?>" class="ss-field-width" /></td>
                </tr>
                <tr>
                    <th class="ss-th-width">School</th>
                    <td><input type="text" name="name" value="<?php echo $name; ?>" class="ss-field-width" /></td>
                </tr>
                <tr>
                    <th class="ss-th-width">Image</th>
                    <td><?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
                        <input type="hidden" name="action" value="my_file_upload">
                        <label for="file_upload">It's a file upload...</label>
                        <input type="file" name="file_upload">
                    </td>
                </tr>
            </table>
            <input type='submit' name="insert" value='Save' class='button'>

        </form>

Ajax 代码在这里:

jQuery('#ajax_form').submit(ajaxformdata);   

    function ajaxformdata()
    {    
        var alldata = jQuery(this).serialize();    

        jQuery.ajax({  
            type:"POST",  
            //url: "/wp-admin/admin-ajax.php?action=signup", 
            url: "/mywp/wp-admin/admin-ajax.php?action=cruddata",                   
            data: alldata,  
            success:function(data)
            {
                alert('Data submited');
            },

            error: function(errorThrown)
            {
                alert(errorThrown);
            }  
        });    

        return false;  
    }  

PHP 代码在这里

<?php
function cruddata()
    {
        global $wpdb;
        $code = $_POST["code"];
        $name = $_POST["name"];
        $imagesss = basename($_FILES["photo"]["name"]);
        $table_name = $wpdb->prefix . "school";

        $wpdb->insert(
             $table_name, //table
            array
                (
                    'code' => $code, 
                    'name' => $name
                    //'image_name' => $imagesss
                );
        $message.="Data inserted";
        }

    add_action( 'wp_ajax_cruddata', 'cruddata' );

Answer 1

试试这个 - 在你的 JS 上，你的 url 应该是 ajaxurl，而操作应该是 cruddata 希望这能正常工作。

注册一个执行您的功能的方法

add_action('wp_ajax_cruddata', 'cruddata');
add_action('wp_ajax_nopriv_cruddata', 'cruddata');

您的函数定义 -

function cruddata() {
   // code goes here...
}

Javascript:

jQuery.ajax({
    data: {
        'action': 'cruddata',
    },
    dataType: 'json',
    type: 'post',
    url: ajaxurl,
    beforeSend: function () {
        //
    },
    success: function (data) {
        //
    }    
});