This article describes the Php+iframe implementation of the page without refreshing asynchronous file upload, is a very practical common skills. Share to everyone for your reference. The specific analysis is as follows:
When it comes to IFRAME, there are fewer people using it, and many people believe that it should be replaced by Ajax, which is true, because Ajax is fantastic.
But there is a situation to achieve I chose the IFRAME, this is the file to say the asynchronous upload, interested can try, if the original Ajax to achieve should be more complex.
First to the beginner to fill the basic knowledge:
1. In the IFRAME label will generally specify its name characteristics to the logo;
2. Determine the submitted destination by action (target address) and target (target window, default _self) in form form;
3. To point the target in the form to the name of the IFRAME, you can submit the form to the hidden frame iframe;
4. IFrame content is actually a page, where the parent object in JS refers to the parent page, that is, embedded in the IFRAME page;
5. PHP uses Move_uploaded_file () function to achieve file upload, $_files array Storage has uploaded files related information.
This article realizes is a user chooses the avatar file to upload immediately and displays on the page The example, the nonsense does not say much, the idea is this:
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 on which the file is uploaded is changed, and the function submits the form to the IFRAME, and the embedded page of the IFRAME is used to process the file upload;
3. In the iframe completed the file upload, in JS through the parent to operate the page, in a specific label to display pictures, and the image to save the address assigned to a hidden domain;
4. Back to the original page, now both completed the file upload, but also in the hidden domain records the path of the file, the entire process did not refresh the page;
5. The last user can reset the value of the action and target properties of the form only by submitting the original page.
Here is the screenshot of the effect and the code for the implementation:
The
upload.php page is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The proceedupload.php page is as follows:
<?php
//Here only in a specific picture format for example, this should be dynamically obtained
$url = ' upload/img '. Time (). '. jpg ';
if (Move_uploaded_file ($_files[' Uploadphoto '] [' tmp_name '], $url)) {
//delete previous picture
$_post[' photo ']!== ' & & Unlink ($_post[' photo ']);
? >