从弹出窗口赋值给父窗口。用于多个文件上传把文件路径传递过去。

JavaScript实现表单输入与窗口交互
最新推荐文章于 2023-07-30 20:30:14 发布
原创 最新推荐文章于 2023-07-30 20:30:14 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #input #button #action

1.htm
<form action="" method="post" name="form1">
<input type=text name=maintext>
<input type=button onclick="window.open('2.htm')" value="Open">
</form>

2.htm
<script language="javascript" >
window.opener.document.all.maintext.value="ddddd";
</script>

C++程序操作打开文件对话框（单选/多选）、保存文件对话框、浏览文件夹对话框（附完整源码）
dvlinker的技术专栏
07-26 733
本文讲述C++程序如何打开打开文件对话框（单选/多选）、保存文件对话框、浏览文件夹对话框（附完整源码）。
VC++一文带你搞懂如何操作文件对话框（附源码）
dvlinker的技术专栏
06-02 1万+
本文详细讲述一下C++在操作打开文件对话框、保存文件对话框、浏览文件夹对话框时的相关细节，给大家借鉴和参考。
上传图片过程中给父窗口赋值
weixin_33849942的博客
04-07 132
  string url = Server.MapPath("..\\upImg") + "\\" + System.DateTime.Now.ToString("yyMMddHHmmss") + Path.GetExtension(FileUpload1.FileName);                             FileUpload1.SaveAs(url);       ...
弹出窗口选择值 赋给父窗口
okkeqin的专栏
02-20 1498
authProduct_add.jsp： —— .css" rel="stylesheet" type="text/css" />     jQuery(document).ready(function() {         $( "#authProductMgr.serviceCode" ).focus()
layUI中点击按钮选择图片(不自动上传)，然后点击上传按钮，上传图片(可以上传多个文件)
热门推荐
qzw_wmh的博客
12-20 3万+
效果图： 1、点击“选择文件”，进行选择将要上传的文件； 2、选择好将要上传的文件，文件名称显示在“选择文件”按钮后面； 3、点击“开始上传”按钮，显示在页面上，图片信息传到后台中，将图片进行保存； 4、还可以上传多个文件。 效果图上完了，就开始代码咯！   //layUI代码 &lt;div class="layui-upload"&gt; &lt;span...
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
10-22
JavaScript中的`window.showModalDialog()`方法是一个非常实用的功能，它允许我们从父窗口弹出一个模态对话框，也就是子窗口，并在用户与子窗口交互后返回数据到父窗口。这个功能在创建复杂的用户交互场景时特别有用...
C#文件操作从入门到精通（1）——INI文件操作
qq_34059233的博客
07-30 3707
本文详细介绍ini文件在winform中的应用，纯属项目实战经验！
Visual C++中对话框间相互引用的实现方法
这在实际开发中极为常见，例如主设置界面弹出子配置窗口，而子窗口又需要更新主窗口的状态；或者多个配置面板之间需要协同工作、同步信息等场景。 要实现两个dialog对话框之间的相互引用，首先必须理解MFC中对话框...
plupload+artdialog实现多平台文件上传
weixin_30598225的博客
06-24 190
背景：本来项目中使用的前端文件上传控件是uploadify，一切相安无事了一段时间后。现场传来”喜讯“，客户要用ipad使用系统，还想上传图片。客户老爷一拍脑门，研发就要加班加点。大家知道uploadify是依赖flash的，所以在ios，mac系统上都不行。于是，经过一番google，找到了plupload。上手比较简单。 页面html代码： head标签中包含必要的js文件 &l...
c#对上传的文件对象HttpPostedFile的获取
壁立千仞无欲则刚的博客
05-11 2万+
c#对上传的文件对象的获取有两种方法： 1、从aspx的控件上面取“FileUpload1.PostedFile”： System.Web.HttpPostedFile postFile = null; postFile = FileUpload1.PostedFile; string filepath = FileUpload1.Post
jquery子窗口给父窗口元素赋值和获得值,子窗口调取父窗口方法,父窗口调取子窗口方法
耳畔的声的博客
01-17 1127
1. 子窗口给父窗口元素赋值 function modifyId(id){ $("#id",window.parent.document).attr("value",id);//子窗口给父窗口元素赋值 } 2. 子窗口获得父窗口的元素值 var id=$("#id",window.parent.document).val(); alert(id);
关于文件路径作为参数传递时的转义问题
Best_faker的博客
04-12 4761
本人刚开始学习Python。因为学习了数据库和GUI，所以想用图形化界面来控制数据库的操作。 在写代码的过程中使用open（），来打开文件时，遇到了文件路径的转义问题。虽然在调试时 可以用r''来解决，但我想用图形化界面获取文件路径，再进行读取。所以势必要把文件路径作为 参数传递。 filename = 'E:\大学\编程\Python\课程资料\homework\test.txt' f ...
jquery 弹出窗口 给父窗口的元素赋值
kfcman的专栏
10-17 1073
$("#parent") ----为夫窗口元素ID title -----------所要赋的值 $("#parent",window.parent.document).val(title) ; //给父窗口的元素赋值 parent.openTest(); //openTest 为父窗口的方法...
刷新modalDialog的父窗口
weixin_34296641的博客
12-03 146
1、新建页面parent.htm作为父窗口  1 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; 2 &lt;html&gt; 3     &lt;head&gt; 4         &lt;title&gt;&lt;/title&gt; 5         &lt;meta name="GEN
fastadmin如何通过弹窗选出相关信息后，传送到父窗口的INPUT输入框内
最新发布
08-07
<think>我们正在使用FastAdmin框架，目标是在弹窗中选择数据后将数据传递回父窗口的输入框。 根据引用[2]，我们可以使用FastAdmin提供的Fast.api.layer.open方法打开一个弹窗（layer.open的封装）。 同时，我们需要在弹窗中选择数据后，将数据传递回父窗口。这通常可以通过在弹窗页面中编写JavaScript，在确定选择时调用父窗口的方法来实现。 步骤： 1. 在父窗口（比如一个添加或编辑页面）中，有一个输入框（比如class为"item_no"），我们希望在点击这个输入框时弹出选择数据的窗口。 2. 使用Fast.api.layer.open打开一个弹窗，弹窗内容是一个独立的页面（比如/popup/purchase/itemno/index），这个页面通常是一个数据列表。 3. 在弹窗页面中，当用户选择某一行数据后，我们需要将选中的数据传递回父窗口，并关闭弹窗。 关键点：如何将数据从子窗口（弹窗）传递回父窗口？ 我们可以使用layer提供的回调函数，或者通过父窗口定义全局函数，子窗口调用父窗口的函数。 具体实现： 方法一（推荐）：使用layer的end回调（在弹窗关闭时触发）或者使用子窗口调用父窗口函数。 在FastAdmin中，Fast.api.layer.open方法封装了layer.open，我们可以使用success回调来设置子窗口的函数到父窗口（这样在子窗口中就可以调用父窗口的函数），或者使用end回调在关闭时获取数据。 但是，根据引用[1]中的描述（虽然是Silverlight，但原理类似），我们可以通过以下方式： - 在父窗口中定义一个函数，用于接收数据并填充到输入框。 - 在弹窗页面中，选择数据后，调用父窗口的这个函数，然后关闭自身。 方法二：在弹窗页面中使用window.parent来访问父窗口的DOM和函数。 具体步骤： 第一步：在父窗口的JS代码中，定义接收数据的函数，并绑定输入框的点击事件来打开弹窗。 例如，在父窗口的JS文件（比如在对应的index.html或add.html的script部分）中： ```javascript $(function() { // 当点击某个输入框时，弹出选择窗口 $(document).on('click', '.item_no', function() { // 记录当前输入框，以便在回调中知道要填充到哪个输入框 var that = this; // 使用FastAdmin的弹窗方法 Fast.api.layer.open({ type: 2, // iframe层 title: '选择数据', area: ['80%', '90%'], content: 'http://你的域名/popup/purchase/itemno/index', // 弹窗内容URL end: function() { // 弹窗关闭后的回调，这里我们不需要，因为我们在选择时立即关闭并传递数据 }, success: function(layero, index) { // 这里可以将父窗口的函数挂载到弹窗页面的window对象上，以便弹窗页面调用 // 通过index找到弹窗的iframe的contentWindow var iframeWin = window[layero.find('iframe')[0]['name']]; // 在弹窗页面的window上挂载一个回调函数 iframeWin.selectCallback = function(data) { // 这里data是弹窗页面传递过来的数据 $(that).val(data.item_no); // 假设数据中有item_no字段 // 也可以填充其他字段，比如如果有多个字段，可以遍历赋值 // 关闭弹窗 layer.close(index); }; } }); }); }); ``` 第二步：在弹窗页面（/popup/purchase/itemno/index）中，当用户选择某一行后，调用父窗口传递过来的回调函数（selectCallback），并传递选择的数据。 在弹窗页面的JS中（比如在列表的行点击事件或者一个选择按钮的点击事件中）： ```javascript // 假设我们点击表格行就选择 $('table tbody').on('click', 'tr', function() { // 获取该行的数据，这里假设已经将行数据绑定到了tr的data属性上，或者通过其他方式获取 var row = $(this).data('row'); // 假设在渲染时已经将行数据绑定到tr上 // 或者通过bootstrap table的方法获取行数据 // var row = $(this).bootstrapTable('getSelections')[0]; // 调用父窗口的回调函数 if (typeof parent.selectCallback === 'function') { parent.selectCallback(row); // 将行数据传递回父窗口 } }); ``` 注意：如果弹窗页面是FastAdmin生成的表格页面，那么通常已经使用了bootstrap table，我们可以通过bootstrap table的方法获取选中的数据。 另一种更简单的方式（不通过success回调挂载函数）： 在弹窗页面中直接使用parent对象调用父窗口的函数，前提是父窗口的函数是全局的。 在父窗口定义全局函数： ```javascript function selectItemCallback(data) { $('.item_no').val(data.item_no); } ``` 在弹窗页面中： ```javascript if (typeof parent.selectItemCallback === 'function') { parent.selectItemCallback(row); // 然后关闭弹窗 var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引 parent.layer.close(index); // 再执行关闭 } ``` 但是，由于我们可能在同一个页面有多个输入框需要弹出选择，所以我们需要知道当前是哪个输入框触发的弹窗。因此，我们可以在打开弹窗时，将当前输入框的jQuery对象或其他标识传递给弹窗，或者使用闭包的方式（如第一种方法中，我们将当前输入框的DOM对象保存在闭包中，然后在回调中使用）。 考虑到通用性，我们采用第一种方法，在打开弹窗时，在success回调中给弹窗页面挂载回调函数，这样每个弹窗实例都有独立的回调。 另外，引用[3]中提到了自定义搜索及传值，但我们的重点在弹窗传值，所以这里不展开。 总结： 1. 在父窗口的输入框点击事件中，打开弹窗，并在success回调中给弹窗页面的window对象挂载一个回调函数（如selectCallback），这个回调函数会接收数据并填充到触发弹窗的输入框中，同时关闭弹窗。 2. 在弹窗页面中，选择数据后，调用这个回调函数，并传递数据。 注意：如果弹窗页面是FastAdmin生成的，通常已经包含了jQuery和bootstrap table等，可以直接使用。 示例代码： 父窗口（比如add.html对应的JS）： ```javascript $(function() { // 绑定输入框的点击事件 $('.item_no').click(function() { var that = this; Fast.api.layer.open({ type: 2, title: '选择物品编号', area: ['800px', '600px'], content: '/popup/purchase/itemno/index', success: function(layero, index) { var iframeWin = window[layero.find('iframe')[0]['name']]; // 给弹窗页面挂载回调函数 iframeWin.selectCallback = function(data) { // 将数据填充到输入框 $(that).val(data.item_no); // 如果需要填充其他字段，比如： // $('.other-field').val(data.other_field); layer.close(index); // 关闭弹窗 }; } }); }); }); ``` 弹窗页面（/popup/purchase/itemno/index）的JS中： ```javascript // 假设我们有一个表格，点击行就选择 $(document).on('click', 'table tbody tr', function() { // 获取行数据，假设我们已经在行上绑定了data-row属性（在渲染时） var row = $(this).data('row'); // 或者如果是bootstrap table，可以使用： // var row = $(this).data('bootstrap.table').getSelections()[0]; 但这样写不准确 // 更准确的方式：使用bootstrap table的方法获取当前行的数据 // 但是注意，这里我们点击行，可能并没有选中，所以可以设置点击行选中，然后获取选中项 // 这里简化处理，假设我们点击行就是选中，并且只允许单选 // 调用父窗口的回调 if (typeof selectCallback === 'function') { selectCallback(row); } }); ``` 注意：在弹窗页面中，我们直接使用selectCallback，因为它是挂载在弹窗页面的window上的。 但是，如果弹窗页面是FastAdmin生成的，那么可能已经包含了列表和选择功能，我们可以添加一个“选择”按钮，然后在按钮事件中获取选中的数据并调用回调。 另外，如果弹窗页面是公共页面，我们可以在URL中传递一个回调函数名，但这样不太安全，所以推荐使用挂载函数的方式。 请根据实际项目调整代码，比如字段名、URL等。 相关问题： 1. 如何在FastAdmin中实现弹窗选择数据？ 2. 如何将子窗口的数据传递回父窗口？ 3. 在FastAdmin中，如何自定义弹窗的样式和功能？</think>在 FastAdmin 中实现弹窗选择数据后传递到父窗口输入框，可以通过以下步骤实现： ### 实现步骤 1. **父窗口打开弹窗** 在父窗口的 JS 文件中，使用 `Fast.api.layer.open()` 打开弹窗页面，并设置回调函数接收数据： ```javascript // 点击输入框时打开弹窗 $(document).on("focus", ".your-input-class", function () { var that = this; // 保存当前输入框对象 Fast.api.layer.open({ type: 2, title: "选择数据", area: ["80%", "90%"], content: "/your/popup/page/url", // 弹窗页面URL success: function (layero, index) { var iframeWin = window[layero.find('iframe')[0]['name']]; // 向子窗口注入回调函数 iframeWin.window.selectCallback = function (data) { $(that).val(data.selectedValue); // 将数据赋给输入框 layer.close(index); // 关闭弹窗 }; } }); }); ``` 2. **弹窗页面（子窗口）处理数据** 在弹窗页面的 JS 中，通过 `window.selectCallback` 回调函数传递数据： ```javascript // 弹窗页面中选择数据后的操作 function onSelect(data) { if (typeof window.selectCallback === "function") { // 向父窗口传递选中数据 window.selectCallback({ selectedValue: data.value, // 传递的数据字段 // 可添加其他字段... }); } else { Fast.api.error("回调函数未定义"); } } ``` 3. **绑定选择事件** 在弹窗页面中绑定选择按钮/行的点击事件： ```javascript // 示例：表格行点击事件 $(document).on('click', 'table tbody tr', function () { var rowData = $(this).data('row'); // 获取行数据 onSelect({ value: rowData.your_field // 需要传递的字段 }); }); ``` ### 关键说明 1. **数据传递机制**： - 父窗口通过 `success` 回调向子窗口注入 `selectCallback` 函数 - 子窗口通过 `window.selectCallback(data)` 回传数据 - 父窗口在回调中处理数据并关闭弹窗 2. **参数说明**： - `type: 2`：表示 iframe 弹窗 - `area: ["80%", "90%"]`：弹窗尺寸 - `content`：弹窗页面 URL - `data.selectedValue`：自定义传递的数据字段 3. **多字段传递**： ```javascript // 子窗口传递多个字段 window.selectCallback({ field1: rowData.name, field2: rowData.id, field3: rowData.price }); // 父窗口接收 $(that).val(data.field1); $('#other-input').val(data.field2); ``` ### 完整示例 ```javascript // 父窗口代码 $(document).on("focus", ".product-select", function () { var targetInput = this; Fast.api.layer.open({ type: 2, title: "选择商品", content: "/admin/product/select", area: ["900px", "600px"], success: function (layero, index) { var iframe = layero.find('iframe')[0]; iframe.contentWindow.selectCallback = function (data) { $(targetInput).val(data.product_name); $('#product_id').val(data.product_id); // 填充隐藏域ID layer.close(index); }; } }); }); // 弹窗页面代码 function onProductSelect(row) { if (typeof window.selectCallback === "function") { window.selectCallback({ product_id: row.id, product_name: row.name, price: row.price }); } } ``` ### 注意事项 1. 确保弹窗页面 URL 路径正确 2. 父窗口和子窗口需在同一个域名下（避免跨域问题） 3. 使用 `layer.close(index)` 确保关闭当前弹窗实例 4. 复杂数据传递建议使用 JSON 格式 这种方法利用了 FastAdmin 内置的 `layer.open()` 扩展，通过函数注入实现双向通信，无需额外插件即可完成数据传递[^1][^2]。 --- ### 相关问题 1. 如何在 FastAdmin 弹窗中实现多选数据并批量传递到父窗口？ 2. 弹窗关闭后如何自动刷新父窗口的表格数据？ 3. FastAdmin 中如何防止弹窗重复打开？ 4. 如何给弹窗传递初始参数实现动态筛选？ [^1]: 父窗口与子窗口间的数据传递机制 [^2]: FastAdmin 官方弹窗 API 文档 [^3]: 自定义搜索及传值实现方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值