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 相关文章推荐
jquery中的on方法使用介绍
Dec 29 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
基于js文件加载优化(详解)
Jan 03 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
5.PHP的其他功能
2006/10/09 PHP
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
通过文字传递创建的图形按钮
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
详解jQuery选择器
2016/12/21 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python中进程和线程的区别详解
2017/10/29 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python求前n个阶乘的和实例
2020/04/02 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
讲文明懂礼貌演讲稿
2014/09/11 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书