用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 学习笔记二 字符串拼接
Mar 28 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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递归算法和应用方法介绍
2013/04/15 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
JS面向对象编程浅析
2011/08/28 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
Python备份Mysql脚本
2008/08/11 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
停车场管理协议书范本
2014/10/08 职场文书
2014年营业员工作总结
2014/11/18 职场文书
感谢信模板大全
2015/01/23 职场文书
趵突泉导游词
2015/02/03 职场文书
惊天动地观后感
2015/06/10 职场文书
同意转租证明
2015/06/24 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL