用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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
用原生js做单页应用
2017/01/17 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
深入浅析JS中的严格模式
2018/06/04 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python代码调试的几种方法总结
2015/04/15 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
给导游的表扬信
2014/01/10 职场文书
cf搞笑广告词
2014/03/14 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
工程售后服务承诺书
2014/05/21 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
详解JAVA的控制语句
2021/11/11 Java/Android