PHP uses iframe to upload and display images

I have been working on an image upload function these days. I originally wanted to use ajax to upload images to achieve instant refresh, but it has never been possible. Later, I used the iframe framework to achieve it. Let me share it with you now and give it as a reference for everyone. I hope to be helpful.

However, there is a problem with using this framework. After I upload the image, I need to return the uploaded path to this framework, so how to take it out? At first, I output the value directly to the iframe, but When I went to take out the path, there was no response. 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 had to 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 the upload is successful in the iframe, it cannot I took it out, tried N methods, and checked N amounts of information. It was really painful.

Later, add a src in the iframe, and then write the output value into a simple javascript statement and output it after the image is uploaded successfully, hehe. Let’s 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="" / alt="PHP uses iframe to upload and display images" >
<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> //表单的那么值对应着空框架的那么值，提交后跳转到空框架中，这样就不对父窗口页面进行刷新了

After submission to the background upload.php page for verification. There will be a self-set path generated

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. Instead of having to go to the database to fetch 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, I can easily upload images without refreshing the page, and the images can be refreshed in time.

Related recommendations:

PHP image file upload implementation code

# #php Image thumbnail implementation method

PHP Principle analysis and code of image file upload

The above is the detailed content of PHP uses iframe to upload and display images. For more information, please follow other related articles on the PHP Chinese website!