如何运行一些代码,只要新的图像被上传在WordPress 3.5上传器
How to run some code as soon as new image gets uploaded in WordPress 3.5 uploader
我需要在WordPress 3.5上传器中上传新图像后立即运行一些代码。下面是wp-includes/js/media-views.js的代码(第529-540行)
uploading: function( attachment ) {
var content = this.frame.content;
// If the uploader was selected, navigate to the browser.
if ( 'upload' === content.mode() )
this.frame.content.mode('browse');
// If we're in a workflow that supports multiple attachments,
// automatically select any uploading attachments.
if ( this.get('multiple') )
this.get('selection').add( attachment );
},
我在这个上传功能的底部添加了警告('新图片上传!'),并且浏览器警告'新图片上传!,当新图片上传时。然而,我不想破解WordPress的核心,所以我想知道是否有一种方法,我可以在我的主题中编写一些代码,可以做同样的事情?对不起,我的英语不好。谢谢大家的关注!
这一行 wp-plupload.js显示上传队列将在完成时重置。所以你可以这样做:
wp.Uploader.queue.on('reset', function() {
alert('Upload Complete!');
});
我已经测试过了,它可以在WP 3.5站点上工作。
所以,这里是完整的版本,包括支持常规上传器在"上传新媒体"页面和新的plupload上传器在"插入媒体"对话框。
创建一个名为: wp-admin-extender.js
的javascript文件,并将其保存在您的/custom/js/
文件夹或模板目录下。
// Hack for "Upload New Media" Page (old uploader)
// Overriding the uploadSuccess function:
if (typeof uploadSuccess !== 'undefined') {
// First backup the function into a new variable.
var uploadSuccess_original = uploadSuccess;
// The original uploadSuccess function with has two arguments: fileObj, serverData
// So we globally declare and override the function with two arguments (argument names shouldn't matter)
uploadSuccess = function(fileObj, serverData)
{
// Fire the original procedure with the same arguments
uploadSuccess_original(fileObj, serverData);
// Execute whatever you want here:
alert('Upload Complete!');
}
}
// Hack for "Insert Media" Dialog (new plupload uploader)
// Hooking on the uploader queue (on reset):
if (typeof wp.Uploader !== 'undefined' && typeof wp.Uploader.queue !== 'undefined') {
wp.Uploader.queue.on('reset', function() {
alert('Upload Complete!');
});
}
最后;将此添加到主题的functions.php中,以在WP Admin中获得此功能:
//You can also use other techniques to add/register the script for WP Admin.
function extend_admin_js() {
wp_enqueue_script('wp-admin-extender.js', get_template_directory_uri().'/custom/js/wp-admin-extender.js', array('media-upload', 'swfupload', 'plupload'), false, true);
}
add_action('admin_enqueue_scripts', 'extend_admin_js');
这可能不是合法的解决方案,但它至少是一个变通的办法。
Onur的回答Yıldırım建议挂钩到所有上传的完成。但是根据你的问题,你需要钩住每一个成功的上传。这可以通过扩展wp.Uploader.prototype来实现。有关jQuery的正确说明,请参见stackexchange的链接:https://wordpress.stackexchange.com/a/131295
我已经测试过了,它真的允许你钩子到"成功"响应(和其他,包括init, error, added, progress, complete),它代表了每个文件的plupload"FileUploaded"自触发事件,获得async-upload.php json字符串。
在Javascript中,这可能有帮助:
wp.media.view.Attachments.prototype.on('ready',function(){console.log('your code here');});
在php代码中也可能有一个动作可以工作,我注意到在async-upload.php结尾有echo apply_filters("async_upload_{$type}", $id);
.
也许你可以挂钩到add_attachment动作?
function do_my_attachment_manipulation($attachment_ID)
{
$attachment = get_attached_file($attachment_ID); // Gets path to attachment
// Javascript alert:
?>
<script>
alert('Media uploaded!');
</script>
<?php
}
add_action("add_attachment", 'do_my_attachment_manipulation');
Олег,非常感谢链接https://wordpress.stackexchange.com/a/131295。
这是一个真正有效的伟大解决方案!
这是我自己如何使用这些解决方案的:
$.extend(wp.Uploader.prototype,{
success: function(file_attachment){
console.log(file_attachment);
if(wp.media.frame.content.get() !== null){
setTimeout(function(){
wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
},100);
}
}
});
- WordPress-禁用图像全尺寸选项
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- Wordpress cforms插件CAPTCHA图像未显示
- 在Wordpress网站的图像点击上播放随机声音
- Wordpress自定义元框多图像上传
- 为什么这个jQuery图像映射在WordPress上不起作用
- Wordpress:如何更改图像标签中的源属性
- 插件导致Wordpress图像滑块中的JavaScript冲突
- wordpress插件中的jQuery图像幻灯片
- 在wordpress中使用Jquery隐藏带有图像的文本
- WordPress - 图像和JavaScript不起作用
- 使用wordpress插件查找图像评级
- 将全屏背景图像添加到循环的 Wordpress/Genesis 子主题
- 如何在Wordpress Fancybox图像上将文本超链接到外部网站
- 主页上的居中对齐图像 WordPress.
- 如何通过javascript在wordpress帖子中上传图像
- 如何使用javascript / jquery图像大小调整与wordpress
- 如何根据WordPress中的视口大小提供不同大小的图像
- 在wordpress中为图像生成嵌入代码
- Wordpress:将图像从一种形式传递到另一种形式