用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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 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中使用url传递数组的方法
2015/02/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JavaScript this绑定过程深入详解
2018/12/07 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
项目管理计划书
2014/01/09 职场文书
活动宣传策划方案
2014/05/23 职场文书
会计电算化专业求职信
2014/06/10 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
父亲去世追悼词
2015/06/23 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android