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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue实现表单录入小案例
Sep 27 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 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断点续传之如何分割合并文件
2014/03/22 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python Requests 基础入门
2016/04/07 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
校三好学生主要事迹
2014/01/11 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
学期个人工作总结
2015/02/13 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
离婚被告答辩状
2015/05/22 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript