Rumah > php教程 > PHP开发 > 用iframe实现不刷新整个页面上传图片的实例

用iframe实现不刷新整个页面上传图片的实例

高洛峰
Lepaskan: 2016-12-06 14:48:19
asal
1582 orang telah melayarinya

经常用到上传图片即时预览的功能,实现方式很多,用flash+js实现的比较多,今天遇到同事不想用flash之类也不想用网上的插件,那么我给了他一种解决办法:

思路:

1. 页面上传图片的部分放到一个iframe中,iframe设置无边框无滚动条,和所嵌入的页面风格一致,根据需要设置固定大小

2. 在iframe中提交上传图片的表单,提交后再次返回原页面(iframe所指向的页面)并从服务器带回刚上传的图片地址,调用父页面的js代码加载图片

3. 如果用到要进度条等效果,就在表单提交后,在servlet一端输出进度条,然后一直发送调用js脚本,及时改变页面内容。其他功能诸如取消等功能可以参考推送

下面的代码实现了基本的文件上传:

index.jsp页面里嵌入一个文件上传的页面 _uploadpic.jsp

index.jsp:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

...

  

 <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>

  

  

...

Salin selepas log masuk

_uploadpic.jsp:

1

2

3

4

5

6

7

8

9

10

...

  

<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>

  

  

...

Salin selepas log masuk

servlet:(处理图片上传的servlet)

1

2

3

4

5

6

7

8

//处理上传的图片

  

.... 代码多 此处略去

  

   //把刚上传的图片在服务器中的地址返回到客户端

  

request.setAttribute("img",request.getContextPath()+"/img/mm.jpg");// &#39;/img/mm.jpg&#39;表示刚上传图片在服务器中的地址

request.getRequestDispatcher("/_uploadpic.jsp").forward(request, response);

Salin selepas log masuk

   

以上这篇用iframe实现不刷新整个页面上传图片的实例就是小编分享给大家的全部内容


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan