我知道plupload将成为WordPress 3.3的新上传引擎,但我想知道是否有任何文档将其与WordPress集成。
我专门针对如何在plUpload jQuery对象上载所需的媒体后从其收集响应以及如何在meta框中使用相同功能创建画廊来收集响应?
有人玩过吗?
我知道plupload将成为WordPress 3.3的新上传引擎,但我想知道是否有任何文档将其与WordPress集成。
我专门针对如何在plUpload jQuery对象上载所需的媒体后从其收集响应以及如何在meta框中使用相同功能创建画廊来收集响应?
有人玩过吗?
Answers:
我专门针对如何在plUpload jQuery对象上载所需的媒体后从其收集响应,以及如何在meta框中使用相同的功能来创建画廊呢?
有一个处理此功能的特定文件:/wp-includes/js/plupload/handlers.dev.js
。该文件包含将Plupload(第三方拖放式多文件系统)绑定到上载器的所有挂钩和触发器。
您可能要看两个事件:“ FileUploaded”和“ Upload Complete”
请记住,新的上传器可以一次上传多个文件。因此,如果要在队列中的每个文件上传后要执行某些操作,则可以使用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上传器在同一时间调用相同的方法。因此,我最好的猜测是,您拥有的任何现有hack或集成都应该继续运行。
我有一个使用现有上传器上传文件附件并在自定义元字段中显示URL 的插件。它在旧的上传器上像魔术一样工作,因此我在WP 3.3中启动了它,以查看它是否也可以在新的上传器上使用。
确实如此!
因此,如果您已经与媒体上载器集成在一起,则您的系统应仍可与新系统一起使用,而无需进行任何更改。
(这只是基于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事件,请查看其文档 ....
upload-attachment
将触发本机wp_ajax_upload_attachment()
处理程序的操作,并且通过一些调整完全不需要自定义上传处理程序,仅需要表单和脚本部分。
这是@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;
});
?>