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


Posted in Javascript onNovember 18, 2016

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

思路:

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

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

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

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

index.jsp页面里嵌入一个文件上传的页面 _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='"+imgPath+"'/>";
}
 </script>
 <body>
 <iframe scrolling="no"width="300" height="100" src="_uploadpic.jsp"></iframe>
<!-- use to show img(uploaded) -->
<div id="show_img_div"></div>


...

_uploadpic.jsp:

...

<body onload="javascript:window.parent.showUploadImg('${img}');"><!--'${img}' 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>


...

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

//处理上传的图片 

.... 代码多 此处略去

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

request.setAttribute("img",request.getContextPath()+"/img/mm.jpg");// '/img/mm.jpg'表示刚上传图片在服务器中的地址
request.getRequestDispatcher("/_uploadpic.jsp").forward(request, response);

以上这篇用iframe实现不刷新整个页面上传图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 #Javascript
form+iframe解决跨域上传文件的方法
Nov 18 #Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 #Javascript
微信小程序开发实战教程之手势解锁
Nov 18 #Javascript
JavaScript之WebSocket技术详解
Nov 18 #Javascript
仿iframe效果Aajx文件上传实例
Nov 18 #Javascript
JavaScript之cookie技术详解
Nov 18 #Javascript
You might like
PHP 远程关机实现代码
2009/11/10 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
canvas知识总结
2017/01/25 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
英语故事演讲稿
2014/04/29 职场文书
大队委员竞选稿
2015/11/20 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android