在同一页上的多个图像上使用Media Uploader

时间:2016-01-23 作者:neilgee

我在同一个页面上有多个图像用户元字段,我正在使用媒体上传程序jquery脚本将URL设置为单击图像时的文本字段值。

在一个图像字段上工作正常,但如何在同一页面上的多个图像字段上使用。。。ID为ols\\U user\\U meta\\U image\\U 1至ols\\U user\\U meta\\U image\\U 5的ie

 jQuery(document).ready(function($){ 
var custom_uploader;



$(\'.additional-user-image\').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();
    $(\'#ols_user_meta_image_1\').val(attachment.url);
});

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

});
因此,目前所有字段都将继承#ols\\u user\\u meta\\u image\\u 1值的唯一id,如何调整代码以允许一系列图像id。

1 个回复
最合适的回答,由SO网友:neilgee 整理而成

因此,我设置了一个新的target\\u input变量,该变量获取以前的输入字段ID,该输入是我希望存储所选媒体的URL的位置,这是在选择媒体的按钮的单击功能中完成的。

该变量用于附加URL。

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


var custom_uploader;
var target_input;


$(\'.additional-user-image\').click(function(e) {
    //grab the ID of the input field prior to the button where we want the url value stored
    target_input = $(this).prev().attr(\'id\');

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

        //Added target_input variable to grab ID and add URL
        $( \'#\' + target_input ).val(attachment.url);
    });

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

});

});

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">