用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工具函数代码
Feb 17 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript中的闭包
Feb 24 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 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中的traits实现代码复用使用实例
2015/05/13 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python实现RSA加密(解密)算法
2016/02/17 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
在python中修改.properties文件的操作
2020/04/08 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
社区创先争优承诺书
2014/08/30 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书