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

Question

我创建了一个脚本，它使用$ .ajax和FormData将两个表单对象传递给PHP。一个表单对象是文本，另一个是文件。 它作为一个独立的脚本运行良好。但是，在我将它添加到Wordpress后，作为一个插件，它不断给我"Uncaught TypeError: Illegal invocation"。

我无法负责序列化formdata，因为那时我无法将文件传递给PHP中的回调函数。

JS在ajax调用之前涉及FormData：

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＆＃39; jQuery和排队最新的jQuery版本，但它没有任何区别。

回顾：
1）Ajax / jQuery拒绝将表单对象传递给PHP 2）无法序列化对象，因为我需要保留文件对象
3）脚本在Wordpress之外工作 4）尝试更新到最新的jQuery版本，没有变化

Answer 1

试试这个：

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

Answer 2

我添加了

 dataType: 'json'

它有帮助。 完整列出您的Ajax调用代码：

jQuery.ajax({
    type: 'POST',
    url: fiuajax.ajaxurl,
    data: {
        action: 'fiu_upload_file',
        security: fiuajax.security,
        data: fd,
        dataType: 'json',
        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);
    }
});

Answer 3

这里有一些修改过的代码，以防你有多个数据和多个文件

var fd = new FormData();
var data = jQuery('#yourformID').serializeArray();
jQuery.each(data,function(key,input){
    fd.append(input.name,input.value);
});
var file = jQuery(document).find('input[type="file"]');
jQuery.each(jQuery(file), function(i, obj) {
    jQuery.each(obj.files,function(j,file){
        fd.append('files[' + j + ']', file);
    })
});
fd.append('action', 'fiu_upload_file');

Answer 4

我设法做到了。该代码适用于最新版本的Wordpress（4.9.4）

首先，我使用XMLHttpRequest发送数据而不是jQuery ajax。这意味着您可以将其改编为纯JS。 注意使用此方法传递FormData必不可少的xhttp.setRequestHeader("enctype","multipart/form-data");。

JS：

var user_id = $('#user_id').val();
var picture = $('#userPic')[0].files[0];

console.log(picture);

if( picture && typeof picture !== undefined ) {

  if ( picture['size'] > 1000000 ) {
    alert('The Profile Pic can\'t be larger than 1Mb.');
    return;
  }

  if ( picture['type'].indexOf('image') == -1 ) {
    alert('The uploaded file needs to be an image.');
    return;
  }

  var data = new FormData();
  data.append('user_id', user_id);
  data.append('userPic', picture);

  // console.log(data);

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log('Receive:' + this.responseText);
    }
  };
  xhttp.open("POST", location.origin + "/wp-content/themes/search-and-go-child/ajax/upload_user_profile_pic_ajax.php", true);
    xhttp.setRequestHeader("enctype","multipart/form-data");
  xhttp.send(data);

}

PHP部分也非常有用，因为它需要使用WP核心功能操作接收数据所需的文件。 在这里，您还可以找到使用WP核心功能上传附件的代码。

PHP：

    // error_reporting(-1);
    // ini_set('display_errors', 'On');
    $path = $_SERVER['DOCUMENT_ROOT'];
    require_once($path.'/wp-load.php');
    require_once( '/home/s24t06b21lk5/public_html/wp-includes/template-loader.php' );
    // require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/image.php');
    require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/file.php');
    // require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/media.php');


    $user_id = $_POST['user_id'];
    $picture = $_FILES['userPic'];


    var_dump($user_id);
    var_dump($picture);

    $response = array();

    if( isset($picture['name']) && $picture['name'] ) {

        // Get the path to the upload directory.
        $wp_upload_dir = wp_upload_dir();           

        $picture['name'] = preg_replace( '/[^0-9a-zA-Z.]/', '', basename( $picture['name'] ) );

        // Upload the file
        $upload_overrides = array( 'test_form' => false );
        $upload_result = wp_handle_upload($picture, $upload_overrides);
        // echo '<pre>'; print_r($upload_result); echo '</pre>' ;

        if( $upload_result['url'] ) {

            // Prepare an array of post data for the attachment.
            $attachment = array(
                'guid'           => $upload_result['url'], 
                'post_mime_type' => $picture['type'],
                'post_title'     => $picture['name'],
                'post_content'   => '',
                'post_status'    => 'inherit'
            );


            $attach_id = wp_insert_attachment( $attachment, $upload_result['file'] );

            if( $attach_id ) {

                // Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
                require_once( ABSPATH . 'wp-admin/includes/image.php' );

                // Generate the metadata for the attachment, and update the database record.
                $attach_data = wp_generate_attachment_metadata( $attach_id, $upload_result['file'] );
                wp_update_attachment_metadata( $attach_id, $attach_data );

                // Update the usermeta table with the uploaded avatar
                if( !update_user_meta($user_id, 'wp_user_avatar', $attach_id ) || !update_user_meta($user_id, 'wp_zfgrf5v7rw_user_avatar', $attach_id) ) {
                    $response['result'] = FALSE;
                    $response['message'] = "The uploaded image could not be associated with the User ID in the database.";              
                }
                else {
                    $response['result'] = TRUE;             
                }


            }
            else {
                $response['result'] = FALSE;
                $response['message'] = "Wordpress attachment post for the user's image could not created.";
            }

        }
        else {
            $response['result'] = FALSE;
            $response['message'] = "The file couldn't be uploaded. Check the permissions.";
        }

    }

    die( json_encode($response) );

谢谢。

Answer 5

可在表单中选择任何输入（一个或多个简单或多个），文本区域进行工作（WP 5.0.3）

    $('#form').submit(function(e) {
        e.preventDefault();

        var form = $(this);
        var formdata = (window.FormData) ? new FormData(form[0]) : null;
        var data = (formdata !== null) ? formdata : form.serialize();

        formdata.append("action", "fiu_upload_file");

        $.ajax({
            type: 'POST',
            url: fiuajax.ajaxurl,
            contentType: false,
            processData: false,
            dataType: 'JSON',
            status: 200,
            data: formdata,
            success: function(data){                    
                if(data.error == 'true') {
                    $('.msg').html(data.true);                          
                }
                else {
                    $('.msg').html(data.false);                                                                             
                };
            }
        });
    });

和php仅用于文件

    foreach ($_FILES as $file) :
        if($file['error'] == UPLOAD_ERR_NO_FILE) :
            continue;
        endif;

        $valid_ext = array( 'jpg' , 'jpeg' , 'png' , 'doc' , 'docx' , 'pdf' , 'xls' , 'xlsx');
        $extension_upload = strtolower(  substr(  strrchr($file['name'], '.')  ,1)  );
        if ( in_array($extension_upload,$valid_ext) ) :
            $name_upload = uniqid() . $file['name'];
            $url_insert = trailingslashit( plugin_dir_path( dirname( __FILE__ ) ) ) . 'uploads';
            wp_mkdir_p($url_insert);
            $name_insert = trailingslashit($url_insert) . $name_upload;
            $action = move_uploaded_file($file['tmp_name'],$name_insert);
            $msg_true = 'Upload ok ';
        else :
            $msg_error = 'Upload error';
        endif;
    endforeach;

    $result = !isset($msg_error);
    $msg = array();

    if($result) :
        $msg['error'] = 'true';
        $msg['true'] = $msg_true;
    else :
        $msg['error'] = 'false';
        $msg['false'] = $msg_error;
    endif;



    header('Content-Type: application/json');
    echo json_encode($msg);