Unggah thumbnail pos dari ujung depan

9

Kami ingin pengguna dapat mengunggah gambar mini pos saat mengedit posting. Bagaimana ini akan dilakukan. Saya akan membayangkan itu akan menggunakan fungsi ajax dari wordpress.

Ada ide,

Menakjubkan

Robin I Knight
sumber

Jawaban:

25

Mengunggah file di ajax agak sulit karena tidak mungkin untuk mengunggah file menggunakan objek XMLHttpRequest browser sehingga Anda perlu menggunakan beberapa jenis plugin unggah Ajax dan yang termudah adalah JQuery Form Plugin yang membuat segalanya lebih mudah dan itu termasuk dalam WordPress. Jadi untuk menggunakannya Anda harus membuatnya:

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

pada halaman itu tambahkan formulir unggahan Anda dan JQuery untuk memanggil plugin JQuery Form misalnya:

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

Anda harus memperbarui POSTID dengan ID posting yang sebenarnya. kemudian buat fungsi Ajax untuk menerima unggahan file dan perbarui thumbnail posting

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

semoga ini membantu

Bainternet
sumber
Ini brilian. Hanya beberapa pertanyaan. Artinya, ke mana semua harus pergi. Jelas formulir masuk pada halaman yang dimaksud dan itu akan menjadi pos id yang dapat digunakan. Tindakan add pertama adalah untuk area HEAD atau untuk functions.php. dan blok ajax terakhir dimulai dengan // hook the ajax call. Kemana perginya bit itu. Terimakasih banyak.
Robin I Knight
potongan kode pertama dan terakhir dapat ditempatkan di mana saja di functions.php Anda dan potongan kedua harus ditempatkan pada halaman tempat Anda ingin menampilkan formulir unggahan, Anda juga dapat mengubah potongan kedua menjadi kode pendek untuk mempermudah .
Bainternet
Yang tidak saya dapatkan tentang ini adalah bagaimana formulir tahu menggunakan my_ajax_upload ()? Bukankah itu harus dimasukkan dalam panggilan ajax? Saya bertanya ini karena saya memiliki lingkaran posting yang saya izinkan untuk diedit dan mereka memerlukan fungsi yang berbeda untuk memproses posting tertentu.
Pollux Khafra
Formulir tahu untuk menggunakan my_ajax_upload karena nilai aksinya terkait ( add_action(...) my_ajax_uploadberfungsi.
Bainternet
Apakah ada yang berubah baru-baru ini di WP yang akan mempengaruhi fungsi ini? Untuk beberapa alasan saya tidak $_POSTdata yang pada saat saya mendapatkan my_ajax_upload, meskipun dalam JS callback showRequestyang formDataparam berisi segala sesuatu yang saya harapkan.
drzaus