用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的Ajax时无响应数据的解决方法
May 25 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
javascript表格的渲染组件
Jul 03 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
优化PHP程序的方法小结
2012/02/23 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
基于jquery的放大镜效果
2012/05/30 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
国庆节文艺活动方案
2014/02/03 职场文书
法制宣传实施方案
2014/03/13 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
小学教师读书笔记
2015/07/01 职场文书
勤俭节约主题班会
2015/08/13 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Django框架中视图的用法
2022/06/10 Python