web-dev-qa-db-ja.com

ajaxを使用してフロントエンドから投稿の挿入と投稿のサムネイルのアップロード

このトピックに関して他の人のために働いているように思われる答えを見つけたが、私は働けなかった。

これが私の「形」です 

<div id="uploadPatternForm">
<div class="rightCol fleft w30 ml2">
    <h4><?php _e('Your Info', 'sagive'); ?></h4>
    <input type="text" name="senderName" id="senderName" placeholder="Your Name" />
    <input type="text" name="senderEmail" id="senderEmail" placeholder="Your Email" />
    <input type="text" name="senderWebsite" id="senderWebsite" placeholder="Your Website" />
    <input type="text" name="senderCountry" id="senderCountry" placeholder="Your Country" />
</div>
<div class="midCol fleft w30 ml2">
    <h4><?php _e('Pattern Info', 'sagive'); ?></h4>
    <input type="text" name="patternName" id="patternName" placeholder="Pattern Name" />
    <input type="file" name="patternImage" id="patternImage" size="14" placeholder="Upload Pattern" style="margin-bottom: 8px" />
    <textarea name="patternDesc" id="patternDesc" class="patternDesc" placeholder="Short Description"></textarea>
</div>
<div class="leftCol fleft w30 ml2">
    <h4><?php _e('Pattern Usage', 'sagive'); ?></h4>
    <input type="checkbox" name="personalProjects" id="personalProjects" checked disabled /><span class="fs13 c99">Free in personal projects</span><br />
    <input type="checkbox" name="commercialProjects" id="commercialProjects" checked /><span class="fs13 c99">Free in commercial projects</span> <br />
    <input type="checkbox" name="templatesYouSell" id="templatesYouSell" checked /><span class="fs13 c99">Free in templates you sell</span> <br />
    <div id="submitPattern" class="submitPattern"><?php _e('Upload Pattern', 'sagive'); ?></div>

    <input type="hidden" id="returnedId" value="" />
</div>
<div class="fix"></div>
<div id="pu_message"></div>

。
これは私のjavascriptファイルです 

jQuery(function($){ 

// CALL FOR NEXT 3 FEATURED BUSINESS
$('div#submitPattern').click(function() {
        $.post(ajax_object.ajaxurl, {
            action: 'action_upload_pattern',
            sender_name: $('div#uploadPatternForm').find('input#senderName').attr('value'),
            sender_email: $('div#uploadPatternForm').find('input#senderEmail').attr('value'),
            sender_website: $('div#uploadPatternForm').find('input#senderWebsite').attr('value'),
            sender_country: $('div#uploadPatternForm').find('input#senderCountry').attr('value'),
            pattern_name: $('div#uploadPatternForm').find('input#patternName').attr('value'),
            pattern_image: $('div#uploadPatternForm').find('input#patternImage').attr('value'),
            pattern_desc: $('div#uploadPatternForm').find('#patternDesc').attr('value'),
            pattern_terms_personal: $('div#uploadPatternForm').find('#personalProjects').attr('value'),
            pattern_terms_commercial: $('div#uploadPatternForm').find('#commercialProjects').attr('value'),
            pattern_terms_templates: $('div#uploadPatternForm').find('#templatesYouSell').attr('value')
        }, function(data) {
            var $response=$(data);
            var postid      = $response.filter('#postid').html();
            var success     = $response.filter('#success').html();
            var error       = $response.filter('#error').html();


            if(success) {
                // APPEND NRE ITEMS AND FADE IN SLOW    
                $('input#returnedId').val(postid);

                // APPEND NRE ITEMS AND FADE IN SLOW                
                setTimeout(function(){
                    $('div#pu_message').fadeOut('fast');
                    $('div#pu_message').empty();
                    $('div#pu_message').append(success);                    
                    $('div#pu_message').fadeIn('slow');
                }, 500);
            }

        });

});

;））;

。
これは私のajax phpリスナーです 

    wp_enqueue_script( 'ajax-upload-pattern', get_stylesheet_directory_uri().'/ajaxLoops/ajax-upload_pattern.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-upload-pattern', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_upload_pattern', 'ajax_action_upload_pattern' ); // ajax for logged in users
//add_action( 'wp_ajax_nopriv_upload_pattern', 'ajax_action_upload_pattern' ); // ajax for unlogged in users

function ajax_action_upload_pattern() {

$sender_name                =   $_POST['sender_name'];
$sender_email               =   $_POST['sender_email'];
$sender_website             =   $_POST['sender_website'];
$sender_country             =   $_POST['sender_country'];
$pattern_name               =   $_POST['pattern_name'];
$pattern_image              =   $_POST['pattern_image'];
$pattern_desc               =   $_POST['pattern_desc'];
$pattern_terms_personal     =   $_POST['pattern_terms_personal'];
$pattern_terms_commercial   =   $_POST['pattern_terms_commercial'];
$pattern_terms_templates    =   $_POST['pattern_terms_templates'];

/*** TESTING **
echo '
    <div id="success">
        <ul>
            <li>sender_name: '.$sender_name.'</li>
            <li>sender_email: '.$sender_email.'</li>
            <li>sender_website: '.$sender_website.'</li>
            <li>sender_country: '.$sender_country.'</li>
            <li>pattern_name: '.$pattern_name.'</li>
            <li>pattern_image: '.$pattern_image.'</li>
            <li>pattern_desc: '.$pattern_desc.'</li>
            <li>pattern_terms_personal: '.$pattern_terms_personal.'</li>
            <li>pattern_terms_commercial: '.$pattern_terms_commercial.'</li>
            <li>pattern_terms_templates: '.$pattern_terms_templates.'</li>
        </ul>
    </div>
    ';
*/


/****************************************
** INSER NEW POST
****************************************/
$title          =   $pattern_name;
$description    =   $pattern_desc;

$post = array(
    'post_title'    => $title,
    'post_content'  => stripslashes($description),
    'post_status'   => 'pending',
    'post_type'     => 'post',
    'post_category' => array( 3 )
);

$postid     =   wp_insert_post($post, 10, 1);
do_action('wp_insert_post', 'wp_insert_post', 10, 1); 


/****************************************
** UPDATE POST META FIELDS
****************************************/   

// SENDER DATA META FIELDS
update_metadata('post', $postid, '_cmb_pattern_author_name', $sender_name);

if($sender_website) {
    $noLinkAuthor = 'false'; 
    update_metadata('post', $postid, '_cmb_no_link_author', $sender_website);
}   

if($sender_website) {
    $noLinkAuthor = 'false'; 
    update_metadata('post', $postid, '_cmb_pattern_author_url', $sender_website);
}

// TERMS OF USE
update_metadata('post', $postid, '_cmb_terms_personal_projects', 'on');
if($pattern_terms_commercial == 'on') {update_metadata('post', $postid, '_cmb_terms_commercial_projects', 'on');}
if($pattern_terms_templates == 'on') {update_metadata('post', $postid, '_cmb_terms_resell_intemplates', 'on');}


        if (!function_exists('wp_generate_attachment_metadata')){
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
        }
         if ($pattern_image) {
                $attach_id = media_handle_upload( $pattern_image, $postid );
        }
        if ($attach_id > 0){
            //and if you want to set that image as Post  then use:
            update_post_meta($postid,'_thumbnail_id',$attach_id);
        }   


echo '<div id="success">'.__('Pattern Uploaded!', 'sagive').'</div>';
echo '<div id="postid">'.$postid.'</div>';

die(); // stop executing script
}

。
すべてのデータを取得しようとしています...新しい投稿を作成し、投稿のサムネイルとしてアップロードした画像をアップロードして添付します。

uploadsajaxfront-endwp-insert-postset-post-thumbnail-size
2
Sagive SEO

ファイルをアップロードしていないので、ファイル名だけがわかります。 AJAXを使用してファイルをアップロードするのは、現在のところそれほど簡単ではありません。新しいブラウザは FormData インターフェースを実装していますが、古いブラウザでは、たとえば PlUpload のようなある種のフラッシュアップローダを使用しています。

PlUploadはWPにバンドルされているため、アップロードしたファイルと一緒にすべてのデータを送信することをお勧めします。 javascriptを追加するにはwp_enqueue_scriptsアクションも使用します。

add_action('wp_enqueue_scripts', function(){

  wp_enqueue_script( 'ajax-upload-pattern', 
     get_stylesheet_directory_uri() . '/ajaxLoops/ajax-upload_pattern.js',
     array('plupload-all', 'jquery'),
     1.0
  );

  wp_localize_script('ajax-upload-pattern', 'ajax_object', 
     array(
       'ajaxurl' => admin_url('admin-ajax.php'),
     ));
});

HTMLでファイル入力を次のように変更します。

<a id="browse_file" href="#"> Upload pattern </a>

それからあなたのスクリプトはこのように見えるでしょう（私はこれがajax-upload_pattern.jsであると思います）：

jQuery(function($){ 

  var myUploader = new plupload.Uploader({
    browse_button: 'browse_file', // id of the browser button
    multipart: true,              // <- this is important because you want
                                  //    to pass other data as well
    url: ajax_object.ajaxurl 
  });

  myUploader.init();

  myUploader.bind('FilesAdded', function(up, files){
    $('#browse_file').text('Selected: ' + files[0].name); 
    // do a console.log(files) to see what file was selected...
  });

  // before upload starts, get the value of the other fields
  // and send them with the file
  myUploader.bind('BeforeUpload', function(up) {
    myUploader.settings.multipart_params = {
      action: 'action_upload_pattern',
      // add your other fields here...    
    };
  });

  // equivalent of the your "success" callback
  myUploader.bind('FileUploaded', function(up, file, ret){   
    console.log(ret.response);  
  });

  // trigger submission when this button is clicked
  $('#submitPattern').on('click', function(e) {
    myUploader.start();
    e.preventDefault();      
  });

});

AJAXリクエストハンドラ関数では、送信されたデータは$_POSTおよび$_FILESスーパーグローバルで通常どおり利用できます。

add_action('wp_ajax_action_upload_pattern', function(){

  print_r($_POST);
  print_r($_FILES);

  // insert your post and link your file here...

  exit;
});
4
onetrickpony