JS异步文件上传(兼容IE8+)

 更新时间:2017年04月02日 18:59:38   作者:创源  
本文主要介绍了JS实现异步文件上传的相关资料,具有很好的参考价值。下面跟着小编一起来看下吧

在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲染,相当于刷新。

所以基本思路很简单,提交上传文件表单时,让浏览器转移到iframe处理响应信息,响应信息嵌入一段js代码,这段js代码调用当前页面的一个方法就可以实现回调,类似于xss攻击。

这时就要用到form表单的target属性,我们这里只需要用到iframename的值,iframename指的是iframe的name属性,意思是转移到iframe处理响应信息。

我这里用的是jsp + spring mvc的实现,代码如下

上传文件的JSP->demo.jsp

后端代码:

回调的JSP->uploadCallback.jsp  注意: 如果上传文件的页面不是顶级窗口,而是一个ifream 就要使用window.parent取得上传文件页面的window对象

效果:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JavaScript——DOM操作——Window.document对象详解

    JavaScript——DOM操作——Window.document对象详解

    下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 关于JavaScript的单双引号嵌套问题

    关于JavaScript的单双引号嵌套问题

    单引号和双引号之间可以相互嵌套。接下来通过本文给大家介绍JavaScript的单双引号嵌套问题 ,感兴趣的朋友一起看看吧
    2017-08-08
  • JS把内容动态插入到DIV的实现方法

    JS把内容动态插入到DIV的实现方法

    下面小编就为大家带来一篇JS把内容动态插入到DIV的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Bootstrap表单布局

    Bootstrap表单布局

    这篇文章主要介绍了Bootstrap表单布局的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JavaScript数组排序小程序实现解析

    JavaScript数组排序小程序实现解析

    这篇文章主要介绍了JavaScript数组排序小程序实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • javascript学习之json入门

    javascript学习之json入门

    本文主要对javascript中的JSON进行详细介绍。相信对于初学者具有很好的参考价值,下面就跟着小编一起来看下吧
    2016-12-12
  • 关于Google发布的JavaScript代码规范你要知道哪些

    关于Google发布的JavaScript代码规范你要知道哪些

    代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。这篇文章给大家介绍了关于Google发布的JavaScript代码规范你要知道哪些,感兴趣的朋友一起看看吧
    2018-04-04
  • 轻松掌握JavaScript单例模式

    轻松掌握JavaScript单例模式

    这篇文章主要为大家详细介绍了JavaScript单例模式,帮助大家轻松掌握JS单例模式,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序带动画弹窗组件使用方法详解

    微信小程序带动画弹窗组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序带动画弹窗组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript中break、continue和return的用法区别实例分析

    JavaScript中break、continue和return的用法区别实例分析

    这篇文章主要介绍了JavaScript中break、continue和return的用法区别,结合实例形式详细对比分析了JavaScript中break、continue和return的基本功能、使用方法、区别与操作注意事项,需要的朋友可以参考下
    2020-03-03

最新评论