使用 wp 媒体上传器上传文件路径未显示在字段中

Question

我在我的插件中使用自定义media upload。在我之前的(before 4.0) WordPress 版本中，它运行良好。当我上传音频或图像文件时，它的上传成功

当我点击"Insert Into Post"时，文本字段中显示的上传文件的路径。

但是当我升级我的WordPress into 4.4.2 并上传任何文件时，它的上传成功

当我点击“插入帖子”时，上传文件的文件路径未显示在我的文本字段中。

在两个 WordPress 中，代码都是 100% 相同的。

这是我的 HTML 代码：

<input type="text" size="50" name="mp3" id="mp3" class="upload-url" />
<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload">

这是我的 Functions.php 代码：

function pro_scripts_method() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

    wp_register_script( 'custom-js', plugin_dir_url( __FILE__ )."js/custom.js");
    wp_enqueue_script( 'custom-js' );
}
add_action('admin_enqueue_scripts', 'pro_scripts_method');

这是我的 JS 代码：

jQuery('.st_upload_button').click(function() {
    targetfield = jQuery(this).prev('.upload-url');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    fileurl = jQuery(html).attr('href');
    //alert(fileurl);
    jQuery(targetfield).val(fileurl);
    tb_remove();
}

我提醒fileurl 变量，但它给了我未定义的值。所以请帮我解决这个问题

Answer 1

新 WordPress 对其媒体上传所做的更改是空的 链接 URL 字段。

但如果您点击该字段下方的file url 按钮，然后点击Insert Into Post，您的代码运行良好:)

所以我们需要一种简单的方法来自动将file url 值放入链接网址。我不知道 wordpress 中是否有设置，但我在 jQuery 中编写了一个简单的代码来实现它，它对我来说非常有效。

我真正在做的是：

当用户点击Insert into Post 按钮时。我的 jQuery 检查该 Insert into Post 按钮的父级并找到 file url 值并将其插入 Link URL 字段。而已！简单吧？

jQuery('.savesend input[type=submit]').click(function(){  
         var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
         var field = jQuery(this).parents('.describe').find('.urlfield');
         field.val(url);
     });

所以试试看，让我知道:)

Answer 2

你为什么不使用wp.media？

试试这个：

jQuery(document).ready(function($) {
    "use strict";

    $('.st_upload_button').on('click', function(e){
        e.preventDefault();
        var $input_field = $(this).prev();
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Audio',
            button: {
                text: 'Add Audio'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
        });
        custom_uploader.open();
    });

});

这将在按钮单击时打开媒体屏幕，并将 url 放入输入字段。

Answer 3

他们是自 Wordpress 3.5 以来的 wordpress 上传器的新版本。也许你做的方式在 Wordpress 4.0 中不可用

您可以在此处找到基本教程： http://www.webmaster-source.com/

jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

//This part Should be in function.php (or similar)

add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}