使用iframe提交form，如何把值返回到上一层?-php教程-PHP中文网

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

php中文网

发布： 2016-06-06 20:25:37

原创

1953人浏览过

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>

登录后复制

回复内容：

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

登录后复制

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; ?>

登录后复制

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