Question

我需要在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的核心，所以我想知道是否有一种方法可以在我的主题中编写一些可以做同样事情的代码？对不起我的英语不好。谢谢你们的关注！

Answer 1

This line of wp-plupload.js 表示上传器队列将在完成时重置。所以你可以这样做：

wp.Uploader.queue.on('reset', function() { 
    alert('Upload Complete!');
});

我已对其进行了测试，并且适用于WP 3.5 网站。

所以，这是完整版，包括支持“上传新媒体” 网页上的常规上传者和新版{{ 3}}上传“插入媒体” 对话。

创建一个名为“ 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');

这可能不是合法的解决方案，但它至少是一种解决方法。

Answer 2

OnurYıldırım的回答建议挂钩完成所有上传。但根据您的问题，您需要挂钩每个成功的上传。你可以通过扩展wp.Uploader.prototype来做到这一点。有关jQuery的正确说明，请访问stackexchange的链接：https://wordpress.stackexchange.com/a/131295

我已经测试过，它确实允许你挂钩“成功”响应（以及其他，包括init，错误，添加，进度，完成），它代表每个文件的plupload“FileUploaded”自激事件，获取async-upload.php json字符串。

Answer 3

在Javascript中，这可能有所帮助：

wp.media.view.Attachments.prototype.on('ready',function(){console.log('your code here');});

php代码中可能还有一个可以正常运行的动作，我注意到async-upload末尾有echo apply_filters("async_upload_{$type}", $id);。php。

Answer 4

也许你可以加入add_attachement动作？

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');

Answer 5

Олег，非常感谢链接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 3.5上传器中上传新图像后立即运行一些代码

5 个答案: