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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
js实现简单选项卡制作
Aug 05 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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入门速成(2)
2006/10/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
javascript常用方法总结
2015/05/14 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
解决c++调用python中文乱码问题
2020/07/29 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
一些Solaris面试题
2013/03/22 面试题
企业项目策划书
2014/01/11 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
离职感谢信怎么写
2015/01/22 职场文书
未中标通知书
2015/04/17 职场文书
培训通知
2015/04/17 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS