首頁  >  文章  >  後端開發  >  使用iframe提交form,如何把值返回到上一层?

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

WBOY
WBOY原創
2016-06-06 20:25:371641瀏覽

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

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

upload.php:

<code><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></code>

回复内容:

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

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

upload.php:

<code><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></code>

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

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

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


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

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

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

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

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

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

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

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

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

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

异步提交form不就行了

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn