所选图像的wp.media问题

时间:2021-06-16 作者:Raashid Din

首先,我知道有很多问题与这个问题有关。但问题是,它们都与jquery有某种关联。

但我的问题实现了普通javascript。

基本上,除了onselect()之外,其他一切都正常工作。我无法获取附件的URL。

Here is the code.

var custom_uploader;

var uploadButton = document.getElementById(\'upload_logo_button\');

uploadButton.addEventListener("click", function(e) {
    e.preventDefault();

    if ( custom_uploader ) {
        custom_uploader.open();
        return;
    }

    custom_uploader  = wp.media.frames.file_frame = wp.media({
        frame: \'select\',
        title: \'Choose Image\',
        button: {
            text: \'Select Image\'
        },
        multiple: false
    });

    custom_uploader.onselect = function() {
        var attachment = custom_uploader.state().get(\'selection\').first().toJSON();
        console.log(attachment);
        var uploadLogoImage = document.getElementById("upload_image").innerHTML(attachment.url);
    }

    //Open the uploader dialog
       custom_uploader.open();
});
请有人告诉我为什么我无法获得图像的URL,即使图像成功上传到WP媒体。提前谢谢。如果有人需要更多信息,请随时询问。再次感谢。

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

custom_uploader 实际上是wp.media() 而不是HTML元素,因此该变量没有onselect 属性,但它确实有on() 可用于收听select 选择附件后触发的事件。

其次,HTML元素没有innerHTML() 方法,只有一个名称相同的属性,我们可以使用它来更改元素的内部HTML,如下所示:<Element>.innerHTML = \'foo <b>bar bold</b> baz\'. 请检查MDN web docs 了解更多详细信息。

要解决这些问题,请更改以下内容:

custom_uploader.onselect = function() {
    var attachment = custom_uploader.state().get(\'selection\').first().toJSON();
    console.log(attachment);
    var uploadLogoImage = document.getElementById("upload_image").innerHTML(attachment.url);
}
收件人:

custom_uploader.on( \'select\', function() {
    var attachment = custom_uploader.state().get(\'selection\').first().toJSON();
    console.log(attachment);
    var uploadLogoImage = document.getElementById("upload_image").innerHTML = attachment.url;
} );
此外,如果#upload_image 实际上是<input /> 或textarea字段,然后使用value 属性更改输入/文本区域值,或者您可以使用setAttribute().