PHP + iFrame Implement Asynchronous File Upload without page refreshing,

Source: Internet
Author: User

PHP + iFrame Implement Asynchronous File Upload without page refreshing,

This example describes PHP + iFrame asynchronous file upload that does not need to be refreshed on the page. It 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:

<! 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, 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 ']);?> <Html> 

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.




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.