Example of using iframe to upload images without refreshing the entire page-PHP开发-php.cn

Example of using iframe to upload images without refreshing the entire page

高洛峰

Release： 2016-12-06 14:48:19

Original

1565 people have browsed it

I often use the function of instant preview of uploaded images. There are many ways to implement it. Most of them are implemented with flash+js. Today, I met a colleague who didn’t want to use flash or online plug-ins, so I gave him a solution:

Ideas:

1. Put the uploaded image part of the page into an iframe. The iframe is set to be borderless and scrollless, consistent with the style of the embedded page, and set a fixed size as needed

2. Submit the uploaded image in the iframe After submitting the form, return to the original page (the page pointed to by the iframe) again and bring back the address of the image just uploaded from the server, and call the js code of the parent page to load the image

3. If you want effects such as progress bars, just After the form is submitted, a progress bar is output on the servlet side, and then the js script is continuously sent to change the page content in time. Other functions such as cancellation can refer to push

The following code implements basic file upload:

index.jsp page embeds a file upload page_uploadpic.jsp

index.jsp:

...
 
 <script type="text/javascript">
 /*
param imgPath:img path of uploaded
 
this function will show the uploaded img in div(id=show_img_div)
 */
 function showUploadImg(imgPath){
if(imgPath=="")return;
document.getElementById("show_img_div").innerHTML="<img src=&#39;"+imgPath+"&#39;/>";
}
 </script>
 <body>
 <iframe scrolling="no"width="300" height="100" src="_uploadpic.jsp"></iframe>
<!-- use to show img(uploaded) -->
<div id="show_img_div"></div>
 
 
...

Copy after login

_uploadpic.jsp:

...
 
<body onload="javascript:window.parent.showUploadImg(&#39;${img}&#39;);"><!--&#39;${img}&#39; request或者session中的图片地址(从服务器传递来的) -->
<form method="post" id="upload_form" action="${pageContext.request.contextPath }/servlet/IframeTestImageServlet" enctype="multipart/form-data">
  <input type="file" name="pic"/><br/><input type="submit" value="upload"/>
  </form>
</body>
 
 
...

Copy after login

servlet: (Servlet that handles image uploads)

//处理上传的图片
 
.... 代码多 此处略去
 
   //把刚上传的图片在服务器中的地址返回到客户端
 
request.setAttribute("img",request.getContextPath()+"/img/mm.jpg");// &#39;/img/mm.jpg&#39;表示刚上传图片在服务器中的地址
request.getRequestDispatcher("/_uploadpic.jsp").forward(request, response);

Copy after login

The above example of using iframe to upload images without refreshing the entire page is all the editor has shared with you Content