PHP + iFrame implement asynchronous file upload without page refreshing

Source: Internet
Author: User
Tags php file upload
This article mainly introduces PHP + iFrame asynchronous file upload without page refreshing, including the use of iframe framework and form forms, and PHP file upload and other techniques, for more information about PHP and iFrame implementation pages, see the example below. asynchronous file upload without refreshing is a very useful and common technique. Share it with you for your reference. The specific analysis is as follows:

When it comes to iframe, there are fewer and fewer people using it, and many people believe that it should be replaced by AJAX, because AJAX is so outstanding.

However, I chose iframe for the implementation in one case. this is the asynchronous upload of the files mentioned in this article. if you are interested, try it, if you use native AJAX for implementation, it should be much more complicated.

The following describes how to add basic knowledge to beginners:

1. the iframe label generally specifies its name feature for identification;
2. in the form, use action (target address) and target (target window, default value: _ self) to determine the submission destination;
3. if the target in form points to the name of iframe, the form can be submitted to the hidden frame iframe;
4. the content in iframe is actually a page. the parent object in js refers to the parent page, that is, the page embedded with iframe;
5. use the move_uploaded_file () function in PHP to upload FILES. The $ _ FILES array stores information about the uploaded FILES.

This article provides an example of uploading an Avatar file and displaying it on the page immediately after you select it. The idea is as follows:

1. embed an iframe in the form and set the name attribute value;
2. trigger a js function when the value of the control for file upload is changed. this function submits the form to iframe, and the embedded page of iframe is used to process file upload;
3. after the file is uploaded in iframe, you can use parent in js to operate the parent page, display the image in a specific tag, and assign the save address of the image to a hidden domain;
4. return to the original page. now the file is uploaded and the file path is recorded in the hidden domain. the page is not refreshed throughout the process;
5. at last, you only need to reset the values of the action and target attributes of the form when submitting the original page.

The following is the result and implementation code:

The upload. php page is as follows:

   
  IFrame asynchronous file Upload  IFrame asynchronous file Upload <? Php // after the page is submitted, the related information is displayed if (isset ($ _ POST ['submitted']) {$ html ='
 

Uploaded successfully!

'; $ Html. ='

Username: '.html specialchars ($ _ POST ['username']).'

'; $ Html. ='

Avatar address: '.html specialchars ($ _ POST ['photo ']).'

'; $ Html. ='

'; Echo $ html ;}?>

The proceedupload. php page is as follows:

<? Php // Here, we only use a specific image format for example. we should have dynamically obtained $ url = 'upload/img '. time (). '.jpg '; if (move_uploaded_file ($ _ FILES ['uploadphoto'] ['tmp _ name'], $ url )) {// delete the previous image $ _ POST ['photo']! = ''& Unlink ($ _ POST ['photo ']);?>     
 
  
 <? Php }?>

If you are interested, you can test and run the example in this article. I believe that this article will be of some reference value for learning PHP programming.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.