Tải lên hình thu nhỏ bài đăng từ giao diện người dùng

Chúng tôi muốn người dùng có thể tải lên hình thu nhỏ của bài đăng khi chỉnh sửa bài đăng. Làm thế nào điều này sẽ được thực hiện. Tôi sẽ tưởng tượng nó sẽ sử dụng các chức năng ajax của wordpress.

Bất kỳ ý tưởng,

Kỳ diệu

Tải lên các tệp trong ajax hơi khó khăn vì không thể tải lên các tệp bằng đối tượng XMLHttpRequest của trình duyệt, do đó bạn cần sử dụng một số loại plugin tải lên Ajax và cách dễ nhất là Trình cắm biểu mẫu JQuery giúp mọi việc dễ dàng hơn và đó là Bao gồm trong WordPress. Vì vậy, để sử dụng nó, bạn cần phải ghi lại nó:

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

trên trang đó thêm biểu mẫu tải lên của bạn và JQuery để gọi trình cắm JQuery Form chẳng hạn:

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

bạn phải cập nhật POSTID với ID bài thực tế. sau đó tạo hàm Ajax để chấp nhận tải lên tệp và cập nhật hình thu nhỏ của bài đăng

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

hi vọng điêu nay co ich