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 相关文章推荐
JavaScript中string对象
Jun 12 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
理解javascript中的with关键字
Feb 15 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
使用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
WINXP下apache+php4+mysql
2006/11/25 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
php后门URL的防范
2013/11/12 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python解惑之True和False详解
2017/04/24 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
自荐书模板
2013/12/15 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
网站客服岗位职责
2014/04/05 职场文书
说明书范文
2014/05/07 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
入党个人总结范文
2015/03/02 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python