4

我使用独立版本的 Responsive Filemanager 9 在 <input> #image_link 上进行图像选择。

应在何处以及如何使用 responsive_filemanager_callback 函数？

我正在尝试按照RFM 文档和下面的代码中所述使其工作。这是在 RFM9 中选择图像后更新 <img> #image_preview 的 src 属性所必需的。

这是我的代码：

<input id="image_link" name="link" type="text" value="">
<a class="btn iframe-btn" type="button" href="<?=FILEMANAGER_PATH;?>/dialog.php?type=1&field_id=image_link">Select</a>
<img id="image_preview" src="" />;

<script>
$('.iframe-btn').fancybox({ 
    'width'     : 900,
    'height'    : 600,
    'type'      : 'iframe',
    'autoScale' : false
});

$('#image_link').on('change',function(){
  alert('change triggered');
});

function responsive_filemanager_callback(field_id){ 
    console.log(field_id);
    var url=jQuery('#'+field_id).val();
    alert('update '+field_id+" with "+url); 
    //your code
} 
</script>

$('#image_link')on.('change') 函数无法识别 RFM 所做的更改。

感谢您的投入！

4

5 回答 5

3

创建链接：

<a href='Address_Of_dialog.php?type=0&field_id=name'>open_fancybox</a>

注意href属性的最后一部分field_id参数，即输入字段的ID ，

<input id='name'>

现在，如果您单击将打开 fancybox 的链接，您应该编写以下代码来打开 fancybox：

$('a').fancybox({
        type: 'iframe',
        minHeight: '600'
    });

然后，如果您单击Responsive filemanager中的任何图像，该图像的 url 将打印在输入字段中，并且 fancybox 将自动关闭。

因此，您不需要任何功能即可从Responsive filemanager获取信息，但如果您想在此之后执行任何操作（例如预览所选图像），您可以添加以下功能：

function responsive_filemanager_callback(field_id){ 
   //write whatever you want
   //you can change the src of an <img> using the <input> value
}

此功能将在选择图像并关闭fancybox时立即触发，因此非常方便且易于使用。

如果您想拥有一个干净的文件地址，可以将relative_url=1添加到 href 地址，如下所示：

<a href='Address_Of_dialog.php?type=0&field_id=name&relative_url=1'>open_fancybox</a>
于 2017-01-23T22:20:21.767 回答
2

我的解决方案是修改filemanager/js directory.. (or include.min.js.在 dialog.php 246 行中定义的 include.js 文件）

因此，在第 500 行的 include.js 文件中，您可以找到function apply_img(file,external)

在函数末尾添加以下几行：

 if (typeof **parent.**responsive_filemanager_callback == 'function')
    { parent.responsive_filemanager_callback(external);  } 

    }

“父母”。是最重要的。我想，因为 iFrame 需要它。所以如果你在你的 html 文档中添加一个 .responsive_filemanager_callback 函数，它会运行它。

于 2014-11-10T13:04:05.250 回答
1

On change event is used on demo for cross domain example so you can delete. You must edit the responsive_filemanager_callback function. The rest of the code is ok, see my custom example here

于 2014-10-25T06:43:38.917 回答
1

我现在找到了另一种通过 javascript 检测输入更改的解决方案。

按间隔检查可能不是很漂亮，但简单，足够快且可靠。感谢@kikito！

https://github.com/splendeo/jquery.observe_field

<input id="image_link" name="link" type="text" value="">
<a class="btn iframe-btn" type="button" href="<?=FILEMANAGER_PATH;?>/dialog.php?type=1&field_id=image_link">Select</a>
<img id="image_preview" src="" style="display:none;" />;

<script type="text/javascript" src="/jquery.observe_field.js"></script>
<script>
$('.iframe-btn').fancybox({ 
    'width'     : 900,
    'height'    : 600,
    'type'      : 'iframe',
    'autoScale' : false
});

$(function() {
    // Executes a callback detecting changes with a frequency of 1 second
    $("#image_link").observe_field(1, function( ) {
        // alert('Change observed! new value: ' + this.value );
        $('#image_preview').attr('src',this.value).show();

    });
});
</script>
于 2014-10-30T13:28:32.940 回答
1

设法解决了问题。按照代码：

HTML： 

     <input id="image_link" name="link" type="text" value="">
        <a class="btn iframe-btn" type="button" href="<?=$filemanager_path;?>/dialog.php?type=1&field_id=image_link">Select</a>
        <div id="cont-img"><img id="image_preview" src="" style="display:none;" width="303" /></div>

脚本：

        <script>
        function responsive_filemanager_callback(field_id){ 
            console.log(field_id);
            var url=jQuery('#'+field_id).val();
            //alert('update '+field_id+" with "+url); 
            //your code
            $('#image_preview').attr('src',document.getElementById("image_link").value).show();
            parent.$.fancybox.close();
        } 
        </script>

我使用 fanybox 打开和关闭弹出窗口

于 2015-07-15T13:39:09.543 回答