使用AJAX从前端插入帖子和上传帖子缩略图

时间：2013-03-08 作者：Sagive

i have searched & searched for an explenation and have found some answers that seem to be working for other people on this topics but i havent been able to get working.

This is my "form"

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

.
This is My javascript file

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

        });

});
}）；

.
This is my ajax php listener

    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
}
<我正在尝试获取所有数据。。。创建新帖子，然后上载（&P）；将上载的图像附加为帖子缩略图。

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

您只得到文件名，因为您没有上载文件。使用AJAX上传文件目前并不那么容易。较新的浏览器实现FormData 界面，但对于较旧的浏览器，您必须使用某种flash上传程序，如PlUpload 例如

我建议您使用PlUpload，因为它与WP捆绑在一起，并将所有数据与上载的文件一起发送。同时使用wp_enqueue_scripts 添加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\'),
     ));
});
在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;
});

结束
标签： uploads   ajax   front-end   wp-insert-post   post-thumbnails   小码农  

相关推荐

涉及AJAX的自定义Walker导航问题

我在一个不是我写的主题中使用ajax。这个ajax点击链接，然后将该页面滑入视图。它工作得很好。为了做到这一点，我必须为wp\\U nav\\U菜单定制一个walker，在链接中添加两个字符，以便我的链接在nav中看起来像这样 http://my-site.com/#!/post-1 我的问题是，当查看单个页面时。我必须让WordPress重新加载页面才能获得单个帖子。那么我的链接会是这样的 http://my-site.com/?p=post-1 因此，当我将鼠标悬停在导航上以返回到