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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Python 函数list&read&seek详解
2019/08/28 Python
python连接mongodb集群方法详解
2020/02/13 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
介绍一下RMI的基本概念
2016/12/17 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
销售辞职报告范文
2014/01/12 职场文书
迎新晚会主持词
2014/03/24 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis