PHP+iFrame implements asynchronous file upload without page refresh,

The example in this article describes PHP+iFrame’s implementation of asynchronous file upload without page refresh, which is a very practical and common technique. Share it with everyone for your reference. The specific analysis is as follows:

Speaking of iframe, fewer and fewer people use it now, and many people believe that it should be replaced by AJAX. This is true, because AJAX is so good.

However, there is one situation where I still choose iframe for implementation. This is the asynchronous upload of files that this article is about. If you are interested, you can try it. If you use native AJAX to implement it, it should be much more complicated.

First, let’s provide beginners with basic knowledge:

1. The iframe tag usually specifies its name attribute for identification;
2. Determine the submission destination through action (target address) and target (target window, default is _self) in the form;
3. Point the target in the form to the name of the iframe, and the form can be submitted to the hidden frame iframe;
4. The content in the iframe is actually a page, and the parent object in js refers to the parent page, that is, the page in which the iframe is embedded;
5. Use the move_uploaded_file() function in PHP to implement file upload. The $_FILES array stores information related to the uploaded file.

What this article implements is an example where a user selects an avatar file and immediately uploads it and displays it on the page. Without further ado, the idea is as follows:

1. Embed an iframe in the form and set the name attribute value;
2. A js function is triggered when the value of the control for selecting file upload changes. This function submits the form to the iframe, and the page embedded in the iframe is used to process file uploads;
3. After completing the file upload in the iframe, operate the parent page through parent in js, display the image in a specific tag, and assign the save address of the image to a hidden field;
4. Return to the original page. Now the file upload is completed and the file path is recorded in the hidden field. The entire process does not refresh the page;
5. Finally, the user only needs to reset the values ​​of the action and target attributes of the form when submitting the original page.

The following is a screenshot of the effect and the code implemented:

The upload.php page is as follows:

 
 
 
 
 
 
 
 
iFrame asynchronous file upload
 
   Username: 

   Upload avatar: 
   
   
   

   
 
 <?php
 //Display relevant information after page submission
 if (isset($_POST['submitted'])) {
   $html = '
Upload successful!  
';
   $html .= '
Username:'.htmlspecialchars($_POST['username']).'
';
   $html .= '
Avatar address: https://www.php1.cn/detail/'.htmlspecialchars($_POST['photo']).'
';
   $html .= '
';
   echo $html;
 }
 ?>
 
 
 

 

proceedupload.php page is as follows:

 
 
 
 ')">
 
 
 
 

 

Interested friends can test and run the example of this article. I believe that what is described in this article has certain reference value for everyone’s learning of PHP programming.

http://www.bkjia.com/PHPjc/879725.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/879725.htmlTechArticlePHP+iFrame implements asynchronous file upload without page refresh. This article describes an example of PHP+iFrame implementing asynchronous file upload without page refresh. It is a very practical and common technique. Share with everyone…