web-dev-qa-db-fra.com

insérer un post et télécharger un post de vignette à partir du serveur en utilisant ajax

J'ai cherché et cherché une explication et j'ai trouvé des réponses qui semblent fonctionner pour d'autres personnes sur ce sujet mais que je n'ai pas réussi à faire fonctionner.

Ceci est ma "forme" 

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

.
Ceci est mon fichier 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);
            }

        });

});

});

.
Ceci est mon auditeur 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
}

.
J'essaie de récupérer toutes les données ... créez un nouveau message, puis importez & joignez l'image téléchargée en tant que vignette du message.

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

Vous n'obtenez que les noms de fichiers car vous ne les téléchargez pas. Le téléchargement de fichiers à l'aide de AJAX n'est actuellement pas si facile. Les nouveaux navigateurs implémentent l'interface FormData , mais pour les navigateurs plus anciens, vous êtes bloqué par une sorte d'utilitaire de chargement flash, comme PlUpload par exemple.

Je vous suggère d'utiliser PlUpload, car il est fourni avec WP, et d'envoyer toutes vos données avec le fichier téléchargé. Utilisez également l'action wp_enqueue_scripts pour ajouter du javascript:

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

Dans votre code HTML, modifiez l'entrée du fichier avec:

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

Ensuite, votre script ressemblerait à quelque chose comme ça (je suppose que c'est 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();      
  });

});

Dans votre fonction de gestionnaire de demandes AJAX, les données envoyées sont disponibles comme d'habitude dans les superglobales $_POST et $_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