如何在window/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" );
}   

最后是分配图像和关闭mediaLibrary的函数

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?
    }
}