我知道plupload将成为WordPress 3.3的新上传引擎，但我想知道是否有关于它如何与WordPress集成的文档。
My特别介绍了如何从plUpload jQuery对象一旦上载了所需的媒体，如何在元框中使用相同的功能创建库？
有人玩弄过吗？
元盒子中的Plupload集成？
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);
});\'
uploadSuccess 这里的函数处理图像缩略图，从服务器获取附件元，并将编辑/删除按钮绑定到正确的对象。UploadComplete事件将在队列中的所有内容完成上载后触发。如果要在整个下载完成后启动常规清理操作，则需要绑定到该操作。
例如，WordPress绑定以下内容：
uploader.bind(\'UploadComplete\', function(up, files) {
uploadComplete();
});
uploadComplete 此处的函数仅启用；“插入图库”；页面上的按钮。不幸的是
。。。我们似乎没有办法与这些事件联系在一起。这个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;
});
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;
});
?>
结束