元盒子中的Plupload集成?

时间:2011-11-08 作者:Manny Fleurmond

我知道plupload将成为WordPress 3.3的新上传引擎,但我想知道是否有关于它如何与WordPress集成的文档。

My特别介绍了如何从plUpload jQuery对象一旦上载了所需的媒体,如何在元框中使用相同的功能创建库?

有人玩弄过吗?

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

我的问题是,一旦plUpload jQuery对象上载了您想要的媒体,如何从该对象收集响应,以及如何在元框中使用相同的功能创建库?

有一个处理此功能的特定文件:/wp-includes/js/plupload/handlers.dev.js. 此文件包含将Plupload(第三方拖放多文件系统)绑定到上载程序的所有挂钩和触发器。

您可能想看两个事件:“;文件已上载“;和;上载完成“;

FileUploaded记住,新的上传程序能够一次上传多个文件。因此,如果在上传队列中的每个文件后需要执行某些操作,则将使用jQuery绑定到此事件。

例如,WordPress绑定以下内容:

uploader.bind(\'FileUploaded\', function(up, file, response) {
    uploadSuccess(file, response.response);
});\'
TheuploadSuccess 这里的函数处理图像缩略图,从服务器获取附件元,并将编辑/删除按钮绑定到正确的对象。

UploadComplete事件将在队列中的所有内容完成上载后触发。如果要在整个下载完成后启动常规清理操作,则需要绑定到该操作。

例如,WordPress绑定以下内容:

uploader.bind(\'UploadComplete\', function(up, files) {
    uploadComplete();
});
TheuploadComplete 此处的函数仅启用;“插入图库”;页面上的按钮。

不幸的是

。。。我们似乎没有办法与这些事件联系在一起。这个uploader 对象存在于handlers.js 文件,而Plupload本身无法引用现有实例。您不能使用简单的jQuery选择器来嗅探它并添加自定义事件。。。所以我们在那里运气不好。

一方面,您可以在自己的系统中随意使用这些自定义事件。只需启动您自己版本的handlers.js 把你自己的活动归档,你可以做任何你想做的事。但对于现有的上载程序,您只能使用现有的API。

请记住,新的Pluploader与旧的Flash uploader在相同的时间调用相同的方法。因此,我的最佳猜测是,您现有的任何黑客或集成都应该继续工作。

测试该假设

I have a plugin 它使用现有上载程序上载文件附件,并在自定义元字段中显示URL。它在旧的上传器上工作得很神奇,所以我在WP 3.3中启动了它,看看它是否也在新的上传器上工作。

确实如此!

因此,如果您已经在与媒体上传器集成,那么您的系统应该仍然可以与新系统配合使用,而不需要任何更改。

SO网友:onetrickpony

(这只是基于埃曼答案的一个实际例子)

// 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事件,请查看其documentation....

SO网友:Manny Fleurmond

下面是对“一匹小马驹的答案”的扩展。这除了将文件上载到适当位置外,还将所述文件另存为附件:

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

结束

相关推荐

404从wp-Content/Uploads/获取图像时

我在获取图像时获得404状态,http仍然包含该图像。图像显示在浏览器中,但404代码中断了一些应用程序。对wp内容/上载/的调用被重定向到。htaccess:<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\\.php$ - [L] RewriteRule (.*) /index.php?getfile=$1 [L] </IfModule>&