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的父子兄弟节点查找示例代码
Mar 03 Javascript
让table变成exls的示例代码
Mar 24 Javascript
jquery easyui使用心得
Jul 07 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Vue实现背景更换颜色操作
Jul 17 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
图象函数中的中文显示
2006/10/09 PHP
动态生成gif格式的图像要注意?
2006/10/09 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php微信开发自定义菜单
2016/08/27 PHP
JS获取整个页面文档的实现代码
2011/12/15 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
Node.js事件驱动
2015/06/18 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python实现AES加密解密
2019/03/28 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Django 开发环境配置过程详解
2019/07/18 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
艺术用品:Arteza
2018/11/25 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
初中数学教学反思
2014/01/16 职场文书
幼儿园课题方案
2014/06/09 职场文书
未中标通知书
2015/04/17 职场文书
投资申请报告
2015/05/19 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA