Table of Contents
回复内容:
Home Backend Development PHP Tutorial 使用iframe提交form,如何把值返回到上一层?

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

Jun 06, 2016 pm 08:25 PM
html html5 jquery php web

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

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

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>
Copy after login
Copy after login

回复内容:

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

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

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>
Copy after login
Copy after login

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

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

简单来讲就是通过 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; ?>
Copy after login

之前在做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不就行了

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

CakePHP Date and Time CakePHP Date and Time Sep 10, 2024 pm 05:27 PM

To work with date and time in cakephp4, we are going to make use of the available FrozenTime class.

CakePHP Working with Database CakePHP Working with Database Sep 10, 2024 pm 05:25 PM

Working with database in CakePHP is very easy. We will understand the CRUD (Create, Read, Update, Delete) operations in this chapter.

CakePHP File upload CakePHP File upload Sep 10, 2024 pm 05:27 PM

To work on file upload we are going to use the form helper. Here, is an example for file upload.

Discuss CakePHP Discuss CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu

CakePHP Creating Validators CakePHP Creating Validators Sep 10, 2024 pm 05:26 PM

Validator can be created by adding the following two lines in the controller.

CakePHP Logging CakePHP Logging Sep 10, 2024 pm 05:26 PM

Logging in CakePHP is a very easy task. You just have to use one function. You can log errors, exceptions, user activities, action taken by users, for any background process like cronjob. Logging data in CakePHP is easy. The log() function is provide

How To Set Up Visual Studio Code (VS Code) for PHP Development How To Set Up Visual Studio Code (VS Code) for PHP Development Dec 20, 2024 am 11:31 AM

Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c

See all articles