PHP+iframe image upload achieves instant refresh effect

I have been working on a picture upload function these days. I originally wanted to use ajax to upload pictures to achieve instant refresh, but it has never been possible, alas.

Later I used the iframe framework to implement it, but there is a problem with this framework. After I upload the image, I need to return the uploaded path to this frame, so how do I take it out? I will output the value directly. into the iframe, but there was no response when I took out the path. I kept checking the information online, but the various versions did not provide a comprehensive explanation of how to use iframe to upload images and then realize the real-time refresh function, so I could only study it myself. Most of them say how to upload is enough. I know how to do this. It’s really uncomfortable to stop here. I can only study it myself

Since the value is output to the page after a successful upload in the iframe and cannot be taken out, try After trying N methods and checking N amounts of information, it’s really a pain in the ass.

Later, add a src to the iframe, and then write the output value as a simple javascript statement to output after the image is successfully uploaded, hehe. To summarize:

html code:

<iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe> //iframe设置成隐藏的，src链接的页面为图片上传的后台文件页面，不过加不加影响都不大，只不过为了更精确而已
<img id="tag_img" src="" />
<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="上传" />
</form> //表单的那么值对应着空框架的那么值，提交后跳转到空框架中，这样就不对父窗口页面进行刷新了

is submitted to the background upload.php page for verification. There will be a path generated by yourself

Then after we successfully update the image, we can take out this path, change the image path in the picture box in the parent window through JS, and reassign it, which is equivalent to refreshing the address. Instead of having to go to the database to retrieve the saved path address and update it every time the update is successful.

Here I only write the js code to be returned

echo "<script type=&#39;text/javascript&#39;>window.parent.document.getElementByIdx_x(&#39;tag_img&#39;).setAttribute(&#39;src&#39;,&#39;$updurl&#39;);</script>"; //这就是在框架中输出一段js代码，然后操作父框架中图片地址刷新成我上传的图片地址，$updurl为上传图片的地址

This way, you can easily upload images without refreshing the page, and even if the image is refreshed