php提交表单问题，现在表单里面引入了iframe，可里面的input里面的值不能提交过去

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php提交表单问题，现在表单里面引入了iframe，可里面的input里面的值不能提交过去相关的知识，希望对你有一定的参考价值。

如图需要将上面两个图片上面的值提交到后台，在线等。。。急
这个图片是动态的，用的smarty，可追加悬赏，谢谢大神

用iframe 里面加载的图片？？？

post不出去的 不用想了。


提示 不要用iframe容器，因为父级框架中 无法 提交子框架的 表单。 仅仅用原生的提交表单按钮  是绝对不可能的操作。


如果可以 改用div容器。显示预览，然后 提交原父级表单中的<input type="file"> 可以post传递文件。 iframe下的表单 仅仅用原生的 提交表单按钮 你post不出去


如果又能力自己重写提交动作，重组post数据（jq很简单实现这个）。也可以提交iframe下的子表单的input数据。


以下是我用的 简单的带图片预览上传的 部分代码

引用以下库

ajaxfileupload.js

jquery-migrate-1.2.1.min.js
jquery-1.11.0.min.js

$('input#but_upload').click(function()
//picdata=$('input#picfile').val;
tc = $('div#tags').children('span.selecttag').eq(0).attr('mete_id');
tout = $('div#infos').children('div#sel_mod').find('li.selected').last().attr('mete_hash_name');
if (typeof(tc) == 'undefined')
$('p#outerdebug').text('请选择一个标签');
return false;

if (typeof(tout) == 'undefined')
$('p#outerdebug').text('请选择上传图片所在的模板框架');
return false;

if ($("#picfile").val().length <= 0) 
$('p#outerdebug').text('请选择一个要上传的本地文件');
return false;

$.ajaxFileUpload(
url: "postpic.php?token=" + token +"&tags=" + tc+"&hash_name=" + tout, 
secureuri:false,
type: 'post',
            fileElementId: 'picfile',
dataType: 'json',
success: function(data,status)
if (data.success == true)
tempstr = "<div class=\\"pics\\" mete_hash=\\"" + data.hash_name + "\\"><div class=\\"prepic\\"><img src=\\"" + data.url + "\\"></div><div class=\\"act\\"><div class=\\"removethis\\" onclick=\\"removethis(this)\\"></div><div class=\\"reflink\\" onclick=\\"reflink(this)\\"></div></div></div>";
$("div#previews").prepend(tempstr);
 else 
$('p#outerdebug').text(data.error);

,
error: function (data, status, e)//服务器响应失败处理函数
                    
                        
$('p#outerdebug').text('BR_0'+e);
                    
);
)


html


<form><input id="picfile" name="picfile" type="file" size="2000000"/><br /><input id="but_upload" type="button" value="上传" /><hr /></form><p id="outerdebug"></p><div id="previews"><hr style=" clear:both; visibility:hidden;"/>

 

顺带一提的是，这个实现异步提交上传文件的js库，实际上就是利用了iframe，在iframe子框架内提前实现了一次post。


另外，从用户端执行效果出发。不建议用iframe。 iframe加载是使用的主线程句柄。如果iframe页面响应时间过长。会导致全部页面，包括父级页面锁死。用户体验较差。 能用ajax异步，尽量用。  我还没遇到过ajax加载 输入到div容器，用户体验感反而比iframe差的情况。

追问

如果又能力自己重写提交动作，重组post数据（jq很简单实现这个）这个不会啊，需要使用这个上传

追答

嗯 怎么说呢

推荐你查下相关jq文献，w3c什么的。


实际上 就是 在提交 父级表单时候 捕获 提交表单事件，然后阻止 这个浏览器默认事件

再重写 事件内容本应该包括的表单数据。


验证重组后 在提交新组的数据。

假设你的form 元素 ID为vform


$(document).ready(function()    $("form#vform").submit(function(e)        e.preventDefault();    );
    //这里是你的自定义的拼装post代码过程
    //用ajax异步提交post就可以模拟原始的默认提交了。 这里是可以引用一切页面元素的，包括子框架\\iframe等等。
);

这样就可以阻止默认事件；

 参考技术A 把数据从iframe提出来，或者用jq序列化if里面的表单追问

请问具体怎么做呢

追答

你获取图片下来的时候，就把图片路径js动态加载到表单隐藏域里面，怎么实现别问我

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些，当然ajax也有ajax的好处，只是ajax编码处理有时有些麻烦，虽然经过转码是可以解决中文问题，但如果直接使用iframe不存这些问题了,下面来看看。

最近在做一个项目，用到上传图片功能，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。

具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。

最重要的就是form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中，那么返回值应该怎么获取呢？

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnOK").click(function () {
                var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素
                var frameJson1 = JSON.parse($(frame1).find(‘pre‘).html());
                console.log(frameJson1);
            });
        });
        
    </script>
</head>
<body>
    <form method="POST" action="/Home/Upload" enctype="multipart/form-data" target=‘frameFile1‘ id="form1">
        <input type="file" name="file" id="myphoto">
        <input type="submit" value="提交">
    </form>
    <iframe name=‘frameFile1‘ id="frameFile1" style=‘display: block;‘></iframe>
    <input type="text" name="name" value=" " />
    <input type="button" id="btnOK" value="确定" />
</body>
</html>

 

以上是关于php提交表单问题，现在表单里面引入了iframe，可里面的input里面的值不能提交过去的主要内容，如果未能解决你的问题，请参考以下文章

同时从 iframe 中的表单更新数据

在 iframe 中双重提交值表单

带有 Fancybox 中的提交表单的 iframe 未发布数据

html里面，点击按钮时，怎么使用js或jq给iframe里面的表单赋值和提交

将表单提交到 Colorbox iframe

通过 iframe 跨域提交表单，无需服务器端控件