Question

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

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

Answer 1

用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等等。
});

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

Answer 2

把数据从iframe提出来，或者用jq序列化if里面的表单

追问

请问具体怎么做呢

追答

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