发布到iframe不能在Internet Explorer中工作？ [英] post to iframe don´t work in Internet explorer?
问题描述
在Chrome和Firefox中运行良好。
我有一个网站，用户需要上传10张照片。
我需要进行上传并将它们显示在页面上的div上，而不用刷新页面，也不用重新加载页面。
我使用了设置表单目标属性的技术，在iframe中完成文章，iframe完成文章，当重新加载时，它只是一个带有上传图片的img标签（我在服务器端脚本 - PHP）
在Internet Explorer中，iframe的内容不会改变，帖子不会发生。
有人奇迹可以帮助我吗？已经在这里讨论了很多，但是这些问题大部分都是由javascript动态生成的iframe，但在我的情况下，iframe已经在html中了。是我的代码：
// javascript
$（document）.ready（function（）{
//这个部分在每个浏览器中都有效，在输入类型文件$ j $ b $（。div_input_file）中点击鼠标点击（click）（function（）{
var rel = $ （this）.attr（rel）;
$（。arq+ rel）.trigger（'click'）;
}）
}）;
函数loadPicture（number）
{
$（。remover_produto）。remove（）;
//只是一个gif动画，直到结束动画
$（＃image_load _+ number）.attr（src，images / loading.gif）;
$（＃image_load _+ number）.css（width，172px）;
$（＃image_load _+ number）.css（height，176px）;
//当iframe加载后发布
$（＃upload_target _+ number）.load（function（）{
//获取在发布后加载的iframe中的图像
var image = $（＃upload_target _+ number）.contents（）。find（img）。attr（src）;
$（＃div_input_file _+ number）.html（< img src ='+ image +'alt =''class ='img_uploaded'/>）;
$（＃div_input_file _+ number）.parent（）。append（'< a class = remover_produto =remover _'+ number +'''）;
}）;
}
// html
< div id =div_input_file_1class =div_input_file =1>
< img src =images / criar_anuncio / gallery_pic05.pngalt =id =image_load_1/>
< / div>
< form action =/ upload.phpid =form_upload_1enctype =multipart / form-datamethod =posttarget =upload_target_1onsubmit =loadPicture（1）>
< input name =arquivotype =filesize =30class =arquivo arq1onchange =$（'＃form_upload_1'）。submit（）;/>
< input type =hiddenname =num_imagemvalue =1/>
< / form>
终于找到了问题。
这些行导致了这个问题：
$ p $ $（document）.ready（function（）{
//这部分工作在每个浏览器中，不管是输入类型文件
$（。div_input_file）。click（function（）{
var rel = $（this）。 attr（rel）;
$（。arq+ rel）.trigger（'click'）;
}）
}）;
为了设置输入类型文件的样式，我使用了以下技巧：
点击一个div ，触发输入文件类型被隐藏。
这个动作会导致Internet Explorer中的错误。
我把正常的输入类型文件放在没有样式的位置，这样我就可以测试，并且可以证明它很好用。
感谢所有帮助过我的人$ / $>
I have a difficult problem. Already researched here on the site, and tried many solutions proposed, but none worked in Internet Expolorer 8 (is the version I have installed on my machine). Works fine in Chrome and Firefox. I have a website where the user needs to upload 10 photos. I need make the upload and display them in a div on the page, without flash and without reloading the page. I used the technique of set form target attribute , to do the post in a iframe, the iframe does the post, and when reloaded, it´s just an img tag with the image that was uploaded (I do it at server side script - PHP) In internet explorer the contents of iframe does not change, the post does not happen.
Someone miracle can help me? 've Researched a lot here in the forum, but most of these problems are with iframes dynamically generated by javascript, but in my case, the iframe is already in html
Here is my code:
//javascript
$(document).ready(function() {
//this part works in every browser, is jut´s to triger click in input type file
$(".div_input_file").click(function(){
var rel = $(this).attr("rel");
$(".arq"+rel).trigger('click');
})
});
function loadPicture(number)
{
$(".remover_produto").remove();
//just a gif animation until ends animation
$("#image_load_"+number).attr("src","images/loading.gif");
$("#image_load_"+number).css("width","172px");
$("#image_load_"+number).css("height","176px");
//when iframe load after post
$("#upload_target_"+number).load(function() {
//get image that was loaded in iframe after post
var image = $("#upload_target_"+number).contents().find("img").attr("src");
$("#div_input_file_"+number).html("<img src='"+image+"' alt='' class='img_uploaded' />");
$("#div_input_file_"+number).parent().append('<a class="remover_produto" rel="remover_'+number+'"');
});
}
//html
<iframe id="upload_target_1" class="upload_target" name="upload_target_1" src="upload.php"></iframe>
<div id="div_input_file_1" class="div_input_file" rel="1">
<img src="images/criar_anuncio/gallery_pic05.png" alt="" id="image_load_1" />
</div>
<form action="/upload.php" id="form_upload_1" enctype="multipart/form-data" method="post" target="upload_target_1" onsubmit="loadPicture(1)">
<input name="arquivo" type="file" size="30" class="arquivo arq1" onchange="$('#form_upload_1').submit();"/>
<input type="hidden" name="num_imagem" value="1" />
</form>
Finally found the problem. these lines were causing the problem:
$(document).ready(function() {
//this part works in every browser, is jut´s to triger click in input type file
$(".div_input_file").click(function(){
var rel = $(this).attr("rel");
$(".arq"+rel).trigger('click');
})
});
To style the input type file, I used the following technique: Clicking on a div, the triggering of the input file type that was hidden.
This action causes the bug in internet explorer. I put the normal input type file without styles so I can test, and could prove that it works well
Thanks to everyone who helped
这篇关于发布到iframe不能在Internet Explorer中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
