从前端上传帖子缩略图

时间:2011-03-07 作者:Robin I Knight

我们希望用户能够在编辑帖子时上传帖子缩略图。如何做到这一点。我想它会利用wordpress的ajax功能。

任何想法,

非凡的

1 个回复
最合适的回答,由SO网友:Bainternet 整理而成

在ajax中上载文件有点棘手,因为无法使用浏览器的XMLHttpRequest对象上载文件,所以需要使用某种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更新帖子ID。然后创建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();
} 
希望这有帮助

结束