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 相关文章推荐
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
webpack external模块的具体使用
Mar 10 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
原生js+canvas实现下雪效果
Aug 02 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+mysql大量用户登录解决方案分析
2014/12/29 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JavaScript 继承使用分析
2011/05/12 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
Express的路由详解
2015/12/10 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
jquery css实现流程进度条
2020/03/26 jQuery
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Pytorch释放显存占用方式
2020/01/13 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
酒店司机岗位职责
2013/12/14 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
党建工作先进材料
2014/05/02 职场文书
导师工作推荐信范文
2014/05/17 职场文书
授权委托书
2014/07/31 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
文明家庭事迹材料
2014/12/20 职场文书
会议室管理制度范本
2015/08/06 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript