Home > Developer > Web Develop
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/4C/30/wKioL1Q4gn6zvVYlAAEoOMNBkb0162.jpg "title=" Upload 3.png "alt=" Wkiol1q4gn6zvvylaaeoomnbkb0162.jpg "/>
The traditional upload file function, click "Upload" after the page will be briefly blank, waiting for the response of the server; In order to improve the processing efficiency of the website, the use of simulated Ajax without the flash illusion technology, we can let the page in the case of local refresh, file upload.
demo.html
<script type= "Text/javascript" > function callback (filename) { //"$ ()" is a function encapsulated in a separate JS file: document.getElementById (ID) $ (' photo '). style.display = "None"; $ (' Submit '). style.display = "None"; $ (' msg '). InnerHTML = filename;} </script> <body> <!--target= "frm" This time the request background processing is not the body frame, but the IFRAME framework; the contents of the background output are also output to frm--> <form method= "POST" enctype= "Multipart/form-data" target= "frm" action= "upload.php" > Photos: <input type= "file" name= "photo" id= "photo"/> <input type= "Submit" id= "submit" name= "submit" value= "Upload file"/><br/> </form> <iframe N Ame= "frm" style= "Display:none" ></iframe><br/><!--two-level frame for simulation refresh--<span id= "MSG" ></ Span> </body>
upload.php
File Upload if (!empty ($_post[' submit ')) {$extname = STRRCHR ($_files[' photo ' [' name '], '. '); $filename = Time (). $extname; $file = $_files[' photo ' [' tmp_name ']; Copy ($file, ' upload/'. $filename); echo "<script>parent.callback (' $filename ');</script>";650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/4C/30/wKioL1Q4h7PAIJlIAAAtYaFur50369.jpg "title=" Upload box. png "alt=" wkiol1q4h7paijliaaatyafur50369.jpg "/>
Process explanation
Browser Select the file to upload, click the Upload File button, at this time the body (first frame) did not want to submit this file to action= "upload.php", but target= "frm" corresponding to the IFRAME framework to submit; The IFRAME is secondary to the body frame of the two-level framework, the two-level framework iframe issued an upload request, the file is passed to action= "upload.php", in the above HTML code, the IFRAME framework style= "Display:none", For the sake of beautiful page, we are invisible, if you want to see, set as "block". At this point the page actually has a refresh, but not the entire body refresh, but the two-level framework iframe refresh, because the IFRAME is hidden, and the real iframe default page area is very small, resulting in our view that the page is not refreshed, the illusion appears.
echo "<script>parent.callback ();</script>";
The foreground waits for the backstage response, the backstage returns the JS script to call the foreground level frame callback () function. Note that if there is no "parent" object, the returned JS script will be executed in the IFRAME, and we want the JS script to execute inside the body, then the idea is set up, there is also a point, there is no discovery, "Upload files, return JS script" The two actions of the bear are IFRAME, Rather than the body, and the execution of the program is such that Body<=>iframe<=>upload,iframe is purely an intermediate audience to embody his value.
Callback (filename) function receives the background pass the picture file name, mainly does two things, hides the upload file the path box, displays the upload successful picture name.
This article from "Make a snail really good" blog, please be sure to keep this source http://smili.blog.51cto.com/8919945/1562420
No flush illusion Easy File upload
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
