javascript - 如何在窗口/DIV 中打开媒体库以使用图像 url 填充表单字段？

Question

我有一个 HTML 表单字段，它将获取我的图像的 url。我（在我网站的不同部分）有一个媒体库，用户可以在其中加载和组织他们的图像。现在我希望能够在新窗口中打开这个媒体库（对我来说更容易，但不知道如何使用新窗口中的脚本填充母窗口中的表单字段，方法不允许？ ) 或通过将媒体库读入 div （更麻烦，因为我必须重写大部分媒体库导航以不刷新页面而只刷新该 div）。

我从来没有这样做过，所以我想也许有经验的人可以给我一个提示，让我朝着正确的方向开始。

Answer 1

我最终使用了带有 Iframe 的 jQuery 模态对话，单击图像后，输入字段被填充并关闭对话。

一些示例代码，如果它可以启发任何人......

这是我的带有浏览按钮的输入框

<input type='text' name='data_1' id='data_1' size='30' value='' /> <input type='button' value='Bläddra' onclick="openMediaLibrary('data_1');" />

这是表单页面上的某处（默认隐藏）

<div id="mediaLibrary" title="Mediabiblioteket">
    <iframe width="1050px" height="600px" src="{{ path('Media') }}" /></iframe>
</div>

这是 mediaLibrary 中的图像示例

<a href="javascript:selectImage('{{ entity.webPath }}')"><img src="{{ entity.webPath | apply_filter('my_thumb') }}" class="media_archive_image" /></a>

这是我用于初始化、打开和关闭 mediaLibrary 的函数

$(document).ready(function() {
        $( "#mediaLibrary" ).dialog({
        height: 700,
        width:1100,
        modal: true,
        autoOpen: false,
        position: { my: "center", at: "center" },
    });
};

function openMediaLibrary(passedField) {
    //Set the variable that keeps track of which field to pass back the image url to
    window.imageInputField = passedField
    //open the mediaLibrary
    $( "#mediaLibrary" ).dialog( "open" );
}   

function closeMediaLibrary() {
    $( "#mediaLibrary" ).dialog( "close" );
}   

最后是分配图像和关闭媒体库的功能

function selectImage(image) {

    if (parent.window.imageInputField) {
        //set image to the input field
        parent.window.document.getElementById(parent.window.imageInputField).value = image;

        //Close the dialogue box
        parent.window.closeMediaLibrary();

    }
    else {
        //do nothing for now, perhaps show image in fullsize in lightbox here?
    }
}