使用iframe提交form，如何把值返回到上一层?

1.如何使iframe里的信息，传到div那？
2.如果不使用iframe而使用div的话，怎么让div里的form进行提交且不跳转？
3.文件提交到服务器后，如何获取他的地址，并返回到input里？

<body>
    <div>
        <input type="text">
    </div>
        <iframe scr="./upload.php"></iframe>
</body>

upload.php:

<form action="xxx.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" onchange="uploadImg()">
</form>
    <script>
    //上传图片
    function uploadImg(){
        $("form:first").trigger("submit")
    }
</script>

iframe里的window对象不是可以被外部拿到嘛，在外部弄一个函数，在iframe里提交的时候阻止默认事件然后调用外部的callback

upload.php 在保存好文件之后, 将文件的路径以下面这样的形式返回给上层.

<?php
//假设保存后的文件路径, 保存在 $filePath 变量里
$filePath = '123.jpg';
?>
<script>parent.$('input').val("<?php echo $filePath;?>");</script>

简单来讲就是通过 parent 然后就可以访问iframe所在的那个页面中的内容了.

在线演示地址: https://xqin.net/temp/up.html

up.php 的代码如下(此处只是演示,故只输出当前时间):

<?php

$filePath = time();
?>
<script>parent.document.getElementById('result').value = "<?php echo $filePath;?>";</script>
上传完成! <?php echo $filePath; ?>

h5web通信,http://www.cnblogs.com/ATree/archive/2012/03/07/html5-web-messaging.html

异步提交form不就行了

之前在做chrome插件的时候，碰到过iframe与外部通讯，不知道有没有帮助

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

https://github.com/xwartz/xwartz.github.com/issues/1

iframe裡面上傳成功後, 把值寫到iframe裡面.

event掛到window.onload裡面, 然後去iframe裡面拿data.

【热门文章】