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 面向对象编程  function是方法(函数)
Sep 17 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 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
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php使用PDO方法详解
2014/12/27 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
护士节活动总结
2014/08/29 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
关于python中模块和重载的问题
2021/11/02 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL