joomla 3 组件中需要的文件上传器，例如模板徽标上传器

Posted 2023-02-23

【中文标题】joomla 3 组件中需要的文件上传器，例如模板徽标上传器

【英文标题】：file uploader needed in joomla 3 component like template logo uploader

【发布时间】：2013-10-11 10:46:45

【问题描述】：

我正在 joomla 3 中创建一个组件，我需要一个用于该组件的图像上传器，例如模板徽标上传器（显示灯箱弹出窗口和图像选择）。我不知道该怎么做，如果有人知道，请回复

【参考方案1】：

以下地址将呈现从媒体管理器中选择图像的视图

http://yourdomain/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=

所以你可以在任何灯箱弹出实现中打开它

打开它的页面必须包含一个

function jInsertEditorText( text, editor )....

一旦选择“插入”按钮，就会调用此函数。

我将使用 joomla3 中默认可用的所有功能提供此实现的简单示例。

在您的组件页面上，您可以使用以下代码包含一个显示 bootstarp 模式窗口的按钮 (http://getbootstrap.com/2.3.2/javascript.html#modals)

<a href="#myModal" role="button" style="position:fixed;top:50px"class="btn" data-toggle="modal">show popup</a>

（请不要太注意 style 属性，因为它是用于测试目的）

如果您只是想从控制台或 js 中执行此操作，您可以这样做

jQuery("body").append('<a href="#myModal" role="button" style="position:fixed;top:50px"class="btn" data-toggle="modal">show popup</a>');

然后你可以添加一个带有我上面提到的 url 的 iframe（当你在文章编辑器中推送“图像”时，joomla 遵循相同的方法）

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src="http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author="></iframe></div>

从控制台或js动态执行，

jQuery("body").append('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src=""></iframe></div>');
jQuery('#choose-image').attr("src","http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=");

然后您可以在您的页面中提供一个 js 函数 jInsertEditorText( text, editor ).... 并在弹出窗口中选择图像后处理插入。 或者简单地为插入按钮提供自定义处理 尝试从控制台或脚本中调用以下代码

Query("iframe#choose-image").load(function()jQuery("#choose-image").contents().find(".btn.btn-primary:contains('Insert')").attr("onclick","").click(function()alert(jQuery("#choose-image").contents().find("#f_url").val());););

它基本上删除了默认的 onclick 脚本，并通过在警报对话框上显示选定的图像路径来添加自定义的点击处理。

【讨论】：

嗨，谢谢 melc。对不起，你能解释清楚吗..还需要相同的预览取消按钮。如何在表单中显示？而不是使用正常的文件上传？

通过提供分步示例来编辑答案。请注意，在 iframe 被 jQuery 加载后，您实际上可以以任何您想要的方式修改整个视图，即删除/隐藏字段、更改标题等