Wordpress에서 Ajax 파일 업로드 - FormData를 전달할 수 없습니다.

Wordpress에서 Ajax 파일 업로드 - FormData를 전달할 수 없습니다.

$.ajax와 FormData를 사용하여 2개의 폼오브젝트를 PHP에 전달하는 스크립트를 만들었습니다.한 양식 개체는 텍스트이고 다른 양식 개체는 파일입니다.그것은 독립형 대본으로 잘 작동했다.하지만 워드프레스에 추가한 후 플러그인으로 계속 제공되고 있습니다."Uncaught TypeError: Illegal invocation".

단순히 PHP의 콜백 함수에 파일을 전달할 수 없기 때문에 폼 데이터를 시리얼화할 여유가 없습니다.

Ajax 호출 전 FormData 관련 JS:

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의 jQuery 등록 해제와 최신 jQuery 버전의 enqueue를 시도했지만 아무런 차이가 없었습니다.

개요:
1) Ajax/j쿼리가 양식 개체를 PHP에 전달하는 것을 거부하고 있습니다.
2) 파일 개체를 보존해야 하므로 개체를 직렬화할 수 없습니다.
3) Wordpress 이외에서는 스크립트가 동작합니다.
4) 최신 버전의 jQuery로 업데이트 시도.변경 없음

다음을 수행합니다.

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(4.9.4)에서 작동합니다.

우선 XMLHttpRequest를 사용하여 데이터를 전송하고 jQuery ajax를 전송하지 않습니다.즉, 순수 JS에만 적용할 수 있습니다.주의:xhttp.setRequestHeader("enctype","multipart/form-data");이 방법을 사용하여 FormData를 전달하는데 필수적입니다.

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

감사해요.

임의의 입력(1개 또는 여러 개의 단순 또는 복수), 텍스트 영역, 폼(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); 
                    // your code if you want an action ...                                                                          
                };
            }
        });
    });

파일 전용 및 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(pathinfo($file['name'], PATHINFO_EXTENSION));
        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);

    

나는 덧붙였다.

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

여기에 여러 데이터와 파일이 있는 경우 몇 가지 수정된 코드가 있습니다.

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

언급URL : https://stackoverflow.com/questions/28125376/ajax-file-upload-in-wordpress-cant-pass-formdata