Einfügen und Hochladen von Post-Thumbnails vom Frontend mit Ajax

Ich habe gesucht und nach einer Erklärung gesucht und habe einige Antworten gefunden, die scheinen, für andere Leute auf diesen Themen zu arbeiten, aber ich konnte nicht arbeiten.

Das ist meine “Form”

Free in personal projects
Free in commercial projects
Free in templates you sell

.
Dies ist meine Javascript-Datei

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

});

.
Das ist mein Ajax-Php-Hörer

  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 ' 
  • sender_name: '.$sender_name.'
  • sender_email: '.$sender_email.'
  • sender_website: '.$sender_website.'
  • sender_country: '.$sender_country.'
  • pattern_name: '.$pattern_name.'
  • pattern_image: '.$pattern_image.'
  • pattern_desc: '.$pattern_desc.'
  • pattern_terms_personal: '.$pattern_terms_personal.'
  • pattern_terms_commercial: '.$pattern_terms_commercial.'
  • pattern_terms_templates: '.$pattern_terms_templates.'
'; */ /**************************************** ** 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 '
'.__('Pattern Uploaded!', 'sagive').'
'; echo '
'.$postid.'
'; die(); // stop executing script }

.
Ich versuche, alle Daten zu erfassen … Erstellen Sie einen neuen Beitrag und laden Sie dann das hochgeladene Bild als Post-Thumbnail hoch.

Solutions Collecting From Web of "Einfügen und Hochladen von Post-Thumbnails vom Frontend mit Ajax"

Sie erhalten nur die Dateinamen, da Sie die Dateien nicht hochladen. Das Hochladen von Dateien mit AJAX ist derzeit nicht so einfach. Neuere Browser implementieren die FormData Schnittstelle, aber für ältere Browser sind Sie mit einer Art von Flash-Uploader, wie zum Beispiel PlUpload stecken.

Ich schlage vor, Sie verwenden PlUpload, weil es mit WP gebündelt ist, und senden Sie alle Ihre Daten zusammen mit der hochgeladenen Datei. Verwenden Sie auch die Aktion wp_enqueue_scripts , um JavaScript hinzuzufügen:

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

In Ihrem HTML ändern Sie die Dateieingabe mit:

  Upload pattern  

Dann würde Ihr Skript ajax-upload_pattern.js so aussehen (ich nehme an, das ist 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(); }); }); 

In Ihrer AJAX-Request-Handler-function stehen die gesendeten Daten wie gewohnt in den $_POST und $_FILES Verfügung:

 add_action('wp_ajax_action_upload_pattern', function(){ print_r($_POST); print_r($_FILES); // insert your post and link your file here... exit; });