อัปโหลดภาพขนาดย่อของโพสต์จากส่วนหน้า


9

เราต้องการให้ผู้ใช้สามารถอัปโหลดภาพขนาดย่อโพสต์เมื่อแก้ไขโพสต์ สิ่งนี้จะเกิดขึ้นได้อย่างไร ฉันคิดว่ามันจะใช้ประโยชน์จากฟังก์ชั่น ajax ของ wordpress

ความคิดใด ๆ

มหัศจรรย์

คำตอบ:


25

การอัปโหลดไฟล์ใน ajax นั้นค่อนข้างยุ่งยากเพราะไม่สามารถอัปโหลดไฟล์โดยใช้วัตถุ XMLHttpRequest ของเบราว์เซอร์ดังนั้นคุณต้องใช้ปลั๊กอินอัปโหลด Ajax บางประเภทและวิธีที่ง่ายที่สุดคือปลั๊กอินรูปแบบ JQueryซึ่งทำให้สิ่งต่างๆง่ายขึ้นมาก รวมอยู่ใน 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:

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

คุณต้องอัปเดต 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();
} 

หวังว่านี่จะช่วยได้


อันนี้ยอดเยี่ยม เพียงไม่กี่ข้อ นั่นคือทุกสิ่งไม่จำเป็นต้องไป เห็นได้ชัดว่าแบบฟอร์มปรากฏบนหน้าเว็บที่เป็นปัญหาและนั่นจะเป็นรหัสโพสต์ที่จะใช้ การเพิ่มการกระทำแรกคือสำหรับพื้นที่ HEAD หรือสำหรับ function.php และบล็อก ajax สุดท้ายที่เริ่มต้นด้วย // hook การเรียก ajax บิตนั้นไปไหน ขอบคุณมาก.
Robin I Knight

คุณสามารถวางส่วนย่อยของรหัสตัวแรกและตัวสุดท้ายได้ทุกที่ในฟังก์ชั่นของคุณ php และส่วนย่อยที่สองจะต้องวางไว้บนหน้าเว็บที่คุณต้องการแสดงแบบฟอร์มอัปโหลดของคุณ .
Bainternet

สิ่งที่ฉันไม่ได้รับเกี่ยวกับสิ่งนี้คือแบบฟอร์มจะรู้ได้อย่างไรว่าใช้ my_ajax_upload () ไม่ควรรวมอยู่ในการโทร ajax? ฉันถามสิ่งนี้เพราะฉันมีลูปของโพสต์ที่ฉันอนุญาตให้แก้ไขและพวกเขาต้องการฟังก์ชั่นที่แตกต่างกันสำหรับการประมวลผลโพสต์บางอย่าง
Pollux Khafra

แบบฟอร์มรู้วิธีใช้ my_ajax_upload เนื่องจากค่าการกระทำของมันคือ hooked ( add_action(...) เพื่อmy_ajax_uploadทำงาน
Bainternet

มีอะไรเปลี่ยนแปลงบ้างใน WP ที่จะส่งผลกระทบต่อฟังก์ชันนี้หรือไม่ ด้วยเหตุผลบางอย่างผมไม่มี$_POSTข้อมูลตามเวลาที่ฉันได้รับการmy_ajax_uploadแม้ว่าใน JS โทรกลับพระรามมีทุกสิ่งที่ผมคาดหวัง showRequestformData
drzaus
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.