iframe no refresh file upload implementation program

Iframe non-refresh file upload is actually to open the upload program page on the current page, which is a bit like ajax partial refresh, except that we put it into the iframe page for upload, and at the same time we hide the iframe page.

The most original and simple iframe upload example:

In this example, the iframe name is used, so when the form is submitted, the link will be opened in the iframe (that is, there is no refresh, to be precise, it should be
It feels like there is no refresh)
When the form is submitted, the startUpload method is called, which of course is defined by JS.

The front-end upload page index.html is mainly a form and a js callback function. When uploading files, the method and enctype attributes of the form must be the same as the following code. Then set the target value to the name of the iframe, so that files can be uploaded without refreshing.

The code is as follows

Copy code

代码如下

复制代码

上传文件

<script> <br> function CallbackFunction(str){ <br> alert("上传成功"); <br> } <br> </script>

Upload file

alert("Upload successful");

}

代码如下	复制代码
if($result) { echo "上传成功!文件路径为：".$file2; echo ''; echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>'; }

The background upload processing page uploadfile.php, this code is a simple upload code without error and exception handling. After the upload code is executed, you need to tell the parent page that the upload has been completed. Therefore, the callback function CallbackFunction of the parent page is called in this page. This function can have parameters and the form can be defined by yourself.

The code is as follows	Copy code

The above is a simple method to use iframe to upload files without refreshing. If you want a robust program, you need to refine it Example 2 PHP uses iframe to upload files and return values to the parent frame Tsui actually also uses this hair style. I happened to see something like this written on a children’s shoe blog. Just posted it conveniently.

The code is as follows	Copy code
if($result) { echo "Upload successful! The file path is: ".$file2; echo ''; echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>'; }

After the file is uploaded successfully, write the file path into a hidden field (img), and then use the DOM principle to send the VALUE in the hidden field to the img text box of form1 in the parent frame:
OK, let’s take a look at Tamsui.
Tamsui editor uses tinyMCE, so it is a little different.
My form page:

The code is as follows

代码如下	复制代码

Copy code

代码如下	复制代码
$pasteJS = "n"; echo $pasteJS;

The iframe is also on this page. In the php processing that my iframe is submitted to:

The code is as follows

Copy code

$pasteJS = "n"; echo $pasteJS; The uploaded file then goes to the editing box of tinyMCE. The uploaded file path will also be temporarily stored through userdata until it is written to the database. The path saving is also in the PHP processing file submitted to the iframe, so I won’t write much here.

Related labels：

iframe upload refresh accomplish beat document program page

source：php.cn

Previous article：PHP uses curl_init to initiate http requests to simulate login_PHP tutorial Next article：PHP generates random string program code_PHP tutorial

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