Question

我使用独立版本的Responsive Filemanager 9进行图像选择＆lt;输入＆GT; #image_link。

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

我试图按照RFM documentation和下面的代码中提到的那样工作。这是更新＆lt;的src属性所必需的。 IMG＆GT;在RFM9中选择图像后，＃image_preview。

这是我的代码：

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

$（＆＃39;＃image_link＆＃39;）on。（＆＃39;更改＆＃39;）功能无法通过RFM识别这些更改。

感谢您的投入！

Answer 1

创建链接：

<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'
    });

然后，如果您点击 自适应文件管理器 中的任何图片，该图片的网址将打印在输入字段上，并且fancybox将自动关闭。

因此，您不需要任何功能才能从 响应式文件管理器 中获取信息，但如果您想在此之后执行任何操作（例如预览）所选图像），您可以添加功能：

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>

Answer 2

On change事件用于跨域示例的演示，因此您可以删除。您必须编辑responsive_filemanager_callback函数。其余代码没问题，请参阅我的自定义示例here

Answer 3

我现在找到了另一种解决方案，通过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>

Answer 4

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

因此，在第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函数，它就会运行它。

响应式filemanager回调函数

4 个答案: