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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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&java(二)
2006/10/09 PHP
php session安全问题分析
2011/06/24 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
JavaScript日历实现代码
2010/09/12 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Vue.js实现可编辑的表格
2019/12/11 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python深入学习之闭包
2014/08/31 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python处理大日志文件
2019/07/23 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python代码实现图书管理系统
2020/11/30 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
入党积极分子个人总结
2015/03/02 职场文书
绿里奇迹观后感
2015/06/15 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
python实现进度条的多种实现
2021/04/29 Python