JS异步文件上传(兼容IE8+)


Posted in Javascript onApril 02, 2017

在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲染,相当于刷新。

所以基本思路很简单,提交上传文件表单时,让浏览器转移到iframe处理响应信息,响应信息嵌入一段js代码,这段js代码调用当前页面的一个方法就可以实现回调,类似于xss攻击。

这时就要用到form表单的target属性,我们这里只需要用到iframename的值,iframename指的是iframe的name属性,意思是转移到iframe处理响应信息。

我这里用的是jsp + spring mvc的实现,代码如下

JS异步文件上传(兼容IE8+)

上传文件的JSP->demo.jsp

后端代码:

JS异步文件上传(兼容IE8+)

回调的JSP->uploadCallback.jsp  注意: 如果上传文件的页面不是顶级窗口,而是一个ifream 就要使用window.parent取得上传文件页面的window对象

JS异步文件上传(兼容IE8+)

效果:

JS异步文件上传(兼容IE8+)

JS异步文件上传(兼容IE8+)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
javascript的this关键字详解
May 20 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
使用canvas及js简单生成验证码方法
Apr 02 #Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 #Javascript
Vue表单验证插件的制作过程
Apr 01 #Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 #Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
微信小程序网络请求的封装与填坑之路
Apr 01 #Javascript
You might like
Parse正式发布开源PHP SDK
2014/08/11 PHP
使用PHP编写发红包程序
2015/07/22 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python中的Numpy入门教程
2014/04/26 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
.net面试题
2016/09/17 面试题
Ruby如何创建一个线程
2013/03/10 面试题
企业给企业的表扬信
2014/01/13 职场文书
初三学习决心书
2014/03/11 职场文书
财产公证书
2014/04/10 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle