Wordpress AJAX 文件上传

Question

我无法将上传的文件保存到 Wordpress 数据库：

这里是 HTML：

<div id="portfolio-container">
<form method="post" id="genealogist-code-upload" enctype="multipart/form-data">
    <div>
        <span class="col-xs-1 check <?php if($locked1 == 0){ echo 'fa fa-times-circle-o'; } else { echo 'fa fa-check-circle'; } ?> "></span>
        <h1 class="col-xs-6">1. Genealogist's Code</h1>
        <?php if($locked1 == 0){ ?>
            <label for="file-field" class="btn add-file-btn col-xs-2 text-center">Add File</label>

            <input type="file" name="file" id="file-field" style="display:none;">
    <!-- </div>
    <div> -->
            <input type="submit" id="1" class="col-xs-2 app-upload-btn">
            <button class="col-xs-1 delete upload-1-delete"><span class="fa fa-trash"></span></button>
        <?php } ?>
    </div>
</form>

这里是 JS：

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

$('.app-upload-btn').on('click', function(e){
    e.preventDefault();
    $current = $(this);

    // var file_data = $('.file-field').prop('files')[0];
    var file_data = $('#file-field').val();

    var strconfirm = confirm('Are you sure? This cannot be undone.');

    if (strconfirm == true && file_data != undefined) {
        var form_data = new FormData();
        form_data.append('file', file_data);
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            contentType: false,
            processData: false,
            data: {
                'action': 'save_portfolio',
                'portfolio_num': $(this).attr('id'),
                // 'form_data': form_data
            },
            success: function( data ) {
                $current.siblings(".check").removeClass("fa-times-circle-o").addClass("fa-check-circle");
                $current.css("display", "none");
                $current.siblings('.delete').css("display", "none");
                $current.siblings('.add-file-btn').css("display", "none");
            },
            error: function( error ) {
                console.log('error');
            }
        })
    } else {
        alert('please reupload.');
    }
})

这是我无法访问上传文件的 PHP 代码：

function bcg_portfolio_submission() {

$user = wp_get_current_user();
$portfolio_num = $_POST['portfolio_num'];
$portfolio_locked = 'portfolio_locked_'. $portfolio_num;

$form_data = print_r($_FILES['form_data']);

update_user_meta( $user->ID, $portfolio_locked, true);
wp_send_json_success($form_data);

die();

}

add_action( 'wp_ajax_nopriv_save_portfolio', 'bcg_portfolio_submission' );
add_action( 'wp_ajax_save_portfolio', 'bcg_portfolio_submission');

我想发送一个要通过 PHP 访问的数据对象。我可以添加 data : form_data 作为对象的元素吗？如何在 php 中访问此表单数据？我是否使用全局 $_FILE 变量？如果是这样，你能提供一个例子来说明这是什么样的吗？

Answer 1

要使用ajax 上传image，您必须创建一个form，例如：

var form_data = new FormData();
form_data.append('file', file_data);
// In the same way append all the html elements value in the form

现在将这个表格发送到data 喜欢：

data : form_data

试试这种方法。

您可以在 php 中获取 formdata 值，例如：

$_FILES['file']     // for file
$_REQUEST['index']  // for other html elements

Answer 2

在 Js 和 PHP 代码中尝试以下答案，它适用于从 ajax 调用上传文件。

// Javascript code //

var formdata = new FormData();
 var file = jQuery("#file-field")[0].files[0];
 formdata.append('action', 'ajax_call_function');
 formdata.append('file', file);
 formdata.append('nonce', nonce);
jQuery.ajax({
        url:ajaxurl,  // your ajax URL
        data: formdata,
        dataType: 'json',
        type: 'POST',                   
        contentType: false,
        processData: false,

        success: function(response)
        {
            //console.log('check respose');       
        }

在 PHP 代码中。

您可以通过全局值在 PHP 端获取 ajax 回调函数中的路径。

$filename=$_FILES['file']['tmp_name'];