将内联上载器添加到插件选项页面

时间：2015-02-27 作者：hm711

我想实施inline file uploader 到WP媒体库的新媒体网格视图中引入的我的插件选项页：

enter image description here

我想象有这样的阻力&；在页面中放置uploader，并在使用时在JS中获取错误或附件数据的JSON对象。

据我所知wp.media.view.UploaderInline 中存在的类wp-includes/js/media-views.js 但我不知道如何结合给定的标记来实现这一点。

我找到的唯一资源是关于如何使用媒体模式（在v3.5中引入）上载文件并将文件添加到页面。但是让上传程序内联对我来说会更好，因为我不希望媒体库在这个过程中出现。

有没有人有过实现这一点的经验，让我走上正轨？

Thx公司

3 个回复

最合适的回答,由SO网友:hm711 整理而成

好吧，我想到的是：这都是关于使用plupload library 可湿性粉剂随附。

1。添加一个`<div>` 到插件的选项页面，该页面随后成为拖放区域

    <div class="your-plugin-uploader multiple">
        <input id="your-plugin-uploader-button" type="button" value="<?php esc_attr_e( \'Select Files\' ); ?>" class="your-plugin-uploader-button button">
        <span class="ajaxnonce" id="<?php echo wp_create_nonce( __FILE__ ); ?>"></span>
    </div>

2。注册你的插件JS并确保你定义了`plupload-all` 作为脚本的依赖项

    function se179618_admin_js() {
        wp_register_script( \'your-plugin\', WP_PLUGIN_URL . \'/your-plugin/js/your-plugin.js\', array( \'jquery\', \'plupload-all\' ) );
    }
    add_action( \'admin_enqueue_scripts\', \'se179618_admin_js\' );

3。在页面的`<head>`

    function se179618_admin_head() {
        $uploader_options = array(
            \'runtimes\'          => \'html5,silverlight,flash,html4\',
            \'browse_button\'     => \'my-plugin-uploader-button\', 
            \'container\'         => \'my-plugin-uploader\', 
            \'drop_element\'      => \'my-plugin-uploader\', 
            \'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,
            \'multi_selection\'   => true, 
            \'multipart_params\' => array(
                \'_ajax_nonce\' => \'\',            
                \'action\'      => \'my-plugin-upload-action\'          
            )
        );
    ?>
    <script type="text/javascript">
        var global_uploader_options=<?php echo json_encode( $uploader_options ); ?>;
    </script>
    <?php
    }
    add_action( \'admin_head\', \'se179618_admin_head\' );

4。添加AJAX上传程序调用的操作

    function se179618_ajax_action() {
        // check ajax nonce
        check_ajax_referer( __FILE__ );

        if( current_user_can( \'upload_files\' ) ) {
            $response = array();

            // handle file upload
            $id = media_handle_upload( 
               \'async-upload\',
               0, 
               array( 
                  \'test_form\' => true, 
                  \'action\' => \'my-plugin-upload-action\' 
               )
            );

            // send the file\' url as response
            if( is_wp_error( $id ) ) {
                $response[\'status\'] = \'error\';
                $response[\'error\'] = $id->get_error_messages();
            } else {
                $response[\'status\'] = \'success\';

                $src = wp_get_attachment_image_src( $id, \'thumbnail\' );
                $response[\'attachment\'] = array();
                $response[\'attachment\'][\'id\'] = $id;
                $response[\'attachment\'][\'src\'] = $src[0];
            }

        }

        echo json_encode( $response );
        exit;
    }

    add_action( \'wp_ajax_my-plugin-upload-action\', \'se179618_ajax_action\' );

5。在插件的JS中启动上传程序

    jQuery( document ).ready( function() {

        if( jQuery( \'.your-plugin-uploader\' ).length > 0 ) {
            var options = false;
            var container = jQuery( \'.your-plugin-uploader\' );
            options = JSON.parse( JSON.stringify( global_uploader_options ) );
            options[\'multipart_params\'][\'_ajax_nonce\'] = container.find( \'.ajaxnonce\' ).attr( \'id\' );

            if( container.hasClass( \'multiple\' ) ) {
                  options[\'multi_selection\'] = true;
             }

            var uploader = new plupload.Uploader( options );
            uploader.init();

            // EVENTS
            // init
            uploader.bind( \'Init\', function( up ) {
                console.log( \'Init\', up );
            } );

            // file added
            uploader.bind( \'FilesAdded\', function( up, files ) {
                jQuery.each( files, function( i, file ) {
                    console.log( \'File Added\', i, file );
                } );

               up.refresh();
               up.start();
            } );

            // upload progress
            uploader.bind( \'UploadProgress\', function( up, file ) {
                console.log( \'Progress\', up, file )
            } );

            // file uploaded
            uploader.bind( \'FileUploaded\', function( up, file, response ) {
                response = jQuery.parseJSON( response.response );

                if( response[\'status\'] == \'success\' ) {
                    console.log( \'Success\', up, file, response );
                } else {
                    console.log( \'Error\', up, file, response );
                }

            } );
        }

    } );

SO网友:Jonas Lundman

以下是wp 4.7及以上版本的示例。任务很简单。此代码直接cloned 脚本取自default Wordpress Add new page （media new.php）。

function my_admin_enqueue_scripts() {
    wp_enqueue_script(\'plupload-handlers\');
}
add_action(\'admin_enqueue_scripts\', \'my_admin_enqueue_scripts\');

在选项页上添加此html。让舒尔保留这个outside your own <form> element. 为了使变量不在全局范围内，我建议将html输出包装在函数中。这个例子是借出top admin notices容器来显示每个管理页面上的区域。。。因此，您可以在没有选项页的情况下对其进行测试。

function my_upload_new_media_html(){

    /* everything is copied from media-new.php */
    /* translated, and old browser option is there as well */

    $title = __(\'Upload New Media\');

    $post_id = 0;
    if(isset($_REQUEST[\'post_id\'])){
        $post_id = absint($_REQUEST[\'post_id\']);
        if(!get_post($post_id) || !current_user_can(\'edit_post\', $post_id)) $post_id = 0;
    }

    if($_POST){
        if(isset($_POST[\'html-upload\']) && !empty($_FILES)){
            check_admin_referer(\'media-form\');
            // Upload File button was clicked
            $upload_id = media_handle_upload(\'async-upload\', $post_id);
            if(is_wp_error($upload_id)){
                wp_die($upload_id);
            }
        }
        wp_redirect(admin_url(\'upload.php\'));
        exit;
    }

    $form_class = \'media-upload-form type-form validate\';
    if(get_user_setting(\'uploader\') || isset( $_GET[\'browser-uploader\']))
        $form_class .= \' html-uploader\';

?>

<div class="wrap">
    <h1><?php echo esc_html( $title ); ?></h1>

    <form enctype="multipart/form-data" method="post" action="<?php echo admin_url(\'media-new.php\'); ?>" class="<?php echo esc_attr( $form_class ); ?>" id="file-form">

    <?php media_upload_form(); ?>

    <script type="text/javascript">
    var post_id = <?php echo $post_id; ?>, shortform = 3;
    </script>
    <input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
    <?php wp_nonce_field(\'media-form\'); ?>
    <div id="media-items" class="hide-if-no-js"></div>
    </form>
</div>

<?php
}
add_action(\'all_admin_notices\', \'my_upload_new_media_html\');

砰，就在那里。

SO网友:DiverseAndRemote.com

你要做的第一件事就是打电话wp_enqueue_media. 一个安全的地方可能是admin_init 有条件的行动。

add_action( \'admin_init\', function() {
    $screen = get_current_screen();

    if ( ! $screen || \'my-admin-page-slug\' !== $screen->id ) {
        return;
    }

    wp_enqueue_media();
} );

然后在您的管理页面代码中添加一些内联javascript（或者如果您想干净地执行，将其排入队列）

function my_admin_page_callback() {

    ...
?>
    <a href="#" class="primary button upload">Upload</a>
    <script type="text/javascript">
        $(\'.upload.button\').click(function(e) {
            e.preventDefault();

            var custom_uploader = wp.media({
                title: \'Custom Title\',
                button: {
                    text: \'Custom Button Text\'
                },
                multiple: false  // Set this to true to allow multiple files to be selected
            })
            .on(\'select\', function() {
                var attachment = custom_uploader.state().get(\'selection\').first().toJSON();
                // Do something with attachment.url;
                // Do something with attachment.id;
            })
            .open();
        });
    </script>
<?php
    ...
}

获取拖放框可能有点困难，但如果你自己做一点挖掘，你可能会找到它。

结束

小码农CODE

将内联上载器添加到插件选项页面

1。添加一个`<div>` 到插件的选项页面，该页面随后成为拖放区域

2。注册你的插件JS并确保你定义了`plupload-all` 作为脚本的依赖项

3。在页面的`<head>`

4。添加AJAX上传程序调用的操作

5。在插件的JS中启动上传程序

相关推荐

使用MEDIA_HANDLE_UPLOAD上传多个文件

将内联上载器添加到插件选项页面

1。添加一个<div> 到插件的选项页面，该页面随后成为拖放区域

2。注册你的插件JS并确保你定义了plupload-all 作为脚本的依赖项

3。在页面的<head>

4。添加AJAX上传程序调用的操作

5。在插件的JS中启动上传程序

相关推荐

使用MEDIA_HANDLE_UPLOAD上传多个文件

1。添加一个`<div>` 到插件的选项页面，该页面随后成为拖放区域

2。注册你的插件JS并确保你定义了`plupload-all` 作为脚本的依赖项

3。在页面的`<head>`