프런트 엔드에서 게시물 미리보기 이미지 업로드

게시물을 수정할 때 사용자가 게시물 미리보기 이미지를 업로드 할 수 있기를 바랍니다. 이것이 어떻게 이루어질 것입니까? 워드 프레스의 아약스 기능을 사용한다고 생각합니다.

어떤 아이디어라도

기이

브라우저의 XMLHttpRequest 객체를 사용하여 파일을 업로드 할 수 없으므로 Ajax에서 파일을 업로드하는 것은 약간 까다롭기 때문에 어떤 종류의 Ajax 업로드 플러그인을 사용해야하며 가장 쉬운 것은 JQuery Form Plugin 으로 훨씬 쉽고 편리합니다. WordPress에 포함되어 있습니다. 따라서 그것을 사용하려면 그것을 큐에 넣어야합니다 :

add_action('wp_print_scripts','include_jquery_form_plugin');
function include_jquery_form_plugin(){
    if (is_page('12')){ // only add this on the page that allows the upload
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); 
    }
}

해당 페이지에서 업로드 양식과 JQuery를 추가하여 JQuery 양식 플러그인을 호출하십시오.

<form id="thumbnail_upload" method="post" action="#" enctype="multipart/form-data" >
  <input type="file" name="thumbnail" id="thumbnail">
  <input type='hidden' value='<?php wp_create_nonce( 'upload_thumb' ); ?>' name='_nonce' />
  <input type="hidden" name="post_id" id="post_id" value="POSTID">
  <input type="hidden" name="action" id="action" value="my_upload_action">
  <input id="submit-ajax" name="submit-ajax" type="submit" value="upload">
<form>
<div id="output1"></div>
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',      // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,     // pre-submit callback 
        success:       showResponse,    // post-submit callback 
        url:    ajaxurl                 // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php     
    }; 

    // bind form using 'ajaxForm' 
    $('#thumbnail_upload').ajaxForm(options); 
});
function showRequest(formData, jqForm, options) {
//do extra stuff before submit like disable the submit button
$('#output1').html('Sending...');
$('#submit-ajax').attr("disabled", "disabled");
}
function showResponse(responseText, statusText, xhr, $form)  {
//do extra stuff after submit
}
</script>

실제 게시물 ID로 POSTID를 업데이트해야합니다. 그런 다음 Ajax 기능을 생성하여 파일 업로드를 수락하고 게시물 썸네일을 업데이트하십시오.

//hook the Ajax call
//for logged-in users
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');
//for none logged-in users
add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
//simple Security check
    check_ajax_referer('upload_thumb');

//get POST data
    $post_id = $_POST['post_id'];

//require the needed files
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
//then loop over the files that were sent and store them using  media_handle_upload();
    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                echo "upload error : " . $_FILES[$file]['error'];
                die();
            }
            $attach_id = media_handle_upload( $file, $post_id );
        }   
    }
//and if you want to set that image as Post  then use:
  update_post_meta($post_id,'_thumbnail_id',$attach_id);
  echo "uploaded the new Thumbnail";
  die();
} 

도움이 되었기를 바랍니다