Php+iframe picture upload realize instant refresh effect _php instance

These days in doing a picture upload function, originally wanted to upload images with Ajax to achieve instant refresh, but has not been achieved, alas.

It was later implemented using an IFRAME framework, however, there is a problem with this framework, when I upload the picture after I want to upload the path back to this framework, then how to take out, I began to output the value directly to the IFRAME, but I went to take out the path has not responded, has been on the Internet to view the information , but a variety of versions is not a comprehensive explanation of how to use the IFRAME upload pictures and then realize the real-time refresh function, can only study their own. Most of them are said how to upload on it, this I will, are broken in this is really uncomfortable, only to study their own

Since the success of an IFRAME upload after the output value to the page, can not be taken out, tried the N method, check the n more information, but also really make people egg pain.

Later in the IFRAME to add a src, and then upload a successful picture after the output value of a simple JavaScript statement output on OK, hey. Summarize it:

HTML code:

<iframe id= "Upload_target" name= "Upload_target" src= "upload.php" style= : 0;position:absolute; left:-500px; " ></iframe>//iframe set to hidden, src linked pages for the image upload background file page, but add no effect is not small, just for more accurate

<form enctype= "Multipart/form-data" action= "upload.php" method= "post" target= "Upload_target" >
   <input type= "File" Name= "UserFile" class= "file" value= ""/> <input type=
   "Submit" Name= "Uploadimg" value= " Upload "/>
</form>/form" So the value corresponds to the empty frame of the value, submitted to the empty frame, so that the parent window page is not refreshed

After submitting to the background upload.php page validation. will have a path build that you set yourself

So after we update the picture successfully, you can take this path out, through JS change in the parent window picture box in the picture in the path, and then assign a value, so that is equivalent to refreshing the address, and do not have to go to the database after each update to save the path of the address to be removed to update.

Here I only write the JS code to return

echo "<script type= ' text/javascript ' >window.parent.document.getelementbyidx_x (' tag_img '). SetAttribute (' Src ', ' $updurl ');</script> "; This is to output a section of JS code in the frame, and then manipulate the picture address in the parent frame to the image address I uploaded, $updurl for the address of the uploaded image

This will make it easy to upload the picture without refreshing the page, and even if the image is refreshed

Above this php+iframe picture upload realizes the instantaneous refresh effect is the small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.