是否在meta-box中集成了Plupload？

我知道plupload将成为WordPress 3.3的新上传引擎，但我想知道是否有任何文档将其与WordPress集成。

我具体如何在plUpload jQuery对象上载所需的媒体后如何收集响应，以及如何在meta框中使用相同功能创建画廊？

有人玩过吗？

感谢您的悬赏，尽管在WordPress 3.3正式发布之前很有可能不会给出答案

这个周末我也很有可能会看一下它：-)我已经使用3.3了几个月了，并且需要在第一个RC下降之前写下这个确切的东西...

这是新上传者使用的jQuery插件plupload（plupload.com）的链接。我了解他们如何实现它的要点，但是无法告诉新实现如何成功地上传文件时收到响应。

#1 楼

我具体如何在plUpload jQuery对象上载所需的媒体后如何收集响应，以及如何在meta框中使用相同的功能来创建画廊？

有一个处理此功能的特定文件：/wp-includes/js/plupload/handlers.dev.js。该文件包含将Plupload（第三方拖放式多文件系统）与上载器相关联的所有钩子和触发器。
您可能要查看两个事件：“ FileUploaded”和“ Upload”完成”
FileUploaded
，请记住，新的上传器能够一次上传多个文件。因此，如果要在队列中的每个文件上传后要执行某些操作，则可以使用jQuery绑定到此事件。例如，WordPress绑定了以下内容：

uploader.bind('FileUploaded', function(up, file, response) {
    uploadSuccess(file, response.response);
});'

此处的uploadSuccess函数处理图像缩略图，从服务器获取附件元数据，并将编辑/删除按钮绑定到正确的对象。
UploadComplete
队列中的所有内容完成上传后，将触发UploadComplete事件。如果您想在整个下载完成后触发常规清理操作，这就是您要绑定的内容。例如，WordPress绑定了以下内容：

uploader.bind('UploadComplete', function(up, files) {
    uploadComplete();
});

uploadComplete函数仅启用页面上的“插入图库”按钮。不幸的是，
...似乎没有办法绑定这些事件。 uploader对象存在于handlers.js文件的闭包中，并且Plupload本身无法引用现有实例。您不能使用简单的jQuery选择器来嗅探它并添加自定义事件...因此我们很不走运。
一方面，您可以随意使用这些自定义事件自己的系统。只需使用您自己的事件启动您自己的handlers.js文件版本，您就可以做任何您想做的事情。但是对于现有的上传器，您将无法使用现有的API。
请记住，新的Pluploader与旧的Flash上传器在同一时间调用相同的方法。因此，我最好的猜测是，您拥有的任何现有hack或集成都应继续运行。
测试假设
我有一个插件，该插件使用现有的上传器上传文件附件并在自定义元数据中显示URL领域。它在旧的上传器上像魔术一样工作，所以我在WP 3.3中将其启动，以查看它是否也可以在新的上传器上使用。
而且可以！
因此，如果您已经与媒体上载器，您的系统应仍可与新系统一起使用，而无需进行任何更改。

#2 楼

（这只是一个基于EAMann答案的实际示例）

// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $status = wp_handle_upload($_FILES['async-upload'], array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  exit;
});

您可以使用更多的plupload事件，请查看其文档....

我已经按原样尝试了此代码，到目前为止，它没有任何作用。图片似乎已上传，但我不知道在哪里，控制台也没有响应

–曼妮·弗勒蒙德（Manny Fleurmond）
2011年12月9日下午6:41

好的，发现了问题：由于某种原因，您发送给wp_handle_upload的$ _FILES ['async-upload']似乎没有通过所述函数的检查。如果将array（'test_form'=> false）作为第二个参数传递给wp_handle_upload，它将上传文件而不会出现问题。对add_meta_box的调用中还有一个额外的括号。我对您的答案进行了修改，这应该可以使其正常工作。

–曼妮·弗勒蒙德（Manny Fleurmond）
2011年12月9日7:21

作为实施注意事项-可以将操作设置为upload-attachment，这将触发本机wp_ajax_upload_attachment（）处理程序，并且通过一些调整完全不需要自定义上载处理程序，仅需要表单和脚本部分。

–稀有
2014年2月12日15:33

wp_localize_script（）可以将服务器端数据传递给前端的脚本

– henrywright
20年1月27日，0：46

#3 楼

这是@One Trick Pony的答案的扩展。除了将文件上传到适当位置外，这还将把所述文件另存为附件：

<?php
// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $file = $_FILES['async-upload'];
  $status = wp_handle_upload($file, array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  //Adds file as attachment to WordPress
  echo "\n Attachment ID: " .wp_insert_attachment( array(
     'post_mime_type' => $status['type'],
     'post_title' => preg_replace('/\.[^.]+$/', '', basename($file['name'])),
     'post_content' => '',
     'post_status' => 'inherit'
  ), $status['file']);

  exit;
});
?>

认为这里有一个小错误-wp_insert_attachment调用的最后一个参数应该是$ status ['file']而不是$ status ['url']。可以肯定，它必须是本地路径。

–MathSmath
2011-12-14 19:23

编程黑洞网

是否在meta-box中集成了Plupload？

评论

#1 楼

#2 楼

评论

#3 楼

评论