JS異步文件上傳（兼容IE8+）
在非html5的情況下是無法用ajax把文件推送到后端的，只能通過form表單提交。但是form表單提交后瀏覽器會(huì)根據(jù)響應(yīng)頭與狀態(tài)碼對當(dāng)前頁面進(jìn)行渲染、下載或跳轉(zhuǎn)等行為，返回text、html、json等類型的內(nèi)容時(shí)瀏覽器會(huì)對當(dāng)前頁面進(jìn)行渲染，相當(dāng)于刷新。
所以基本思路很簡單，提交上傳文件表單時(shí)，讓瀏覽器轉(zhuǎn)移到iframe處理響應(yīng)信息，響應(yīng)信息嵌入一段js代碼，這段js代碼調(diào)用當(dāng)前頁面的一個(gè)方法就可以實(shí)現(xiàn)回調(diào)，類似于xss攻擊。
這時(shí)就要用到form表單的target屬性，我們這里只需要用到iframename的值，iframename指的是iframe的name屬性，意思是轉(zhuǎn)移到iframe處理響應(yīng)信息。
我這里用的是jsp + spring mvc的實(shí)現(xiàn)，代碼如下
上傳文件的JSP->demo.jsp
后端代碼：
回調(diào)的JSP->uploadCallback.jsp 注意： 如果上傳文件的頁面不是頂級(jí)窗口，而是一個(gè)ifream 就要使用window.parent取得上傳文件頁面的window對象
效果：
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
詳解javascript實(shí)現(xiàn)瀑布流絕對式布局
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流的兩種布局方式，一是絕對式布局、二是列式布局，詳細(xì)介紹了這兩種布局方式的原理，感興趣的小伙伴們可以參考一下2016-01-01
Mozilla 表達(dá)式 __noSuchMethod__
這是一個(gè)很特殊的方法，但是其存在的意義很大。不過很可惜只有firefox支持了。一個(gè)簡單的例子解釋一下它的用處2009-04-04
Proxy是JavaScript的一個(gè)內(nèi)置對象，它允許您攔截并自定義對象的行為。本文將和大家簡單聊聊JavaScript中Proxy對象的創(chuàng)建與使用，感興趣的可以了解一下2023-03-03
本篇文章主要介紹了利用javascript判斷文件是否存在的方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn)
這篇文章主要介紹了Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了js實(shí)現(xiàn)圖片上傳并正常顯示，我們經(jīng)常遇到上傳照片的情況，如何實(shí)現(xiàn)圖片上傳，本文為大家進(jìn)行揭曉，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JavaScript多態(tài)與封裝,結(jié)合實(shí)例形式分析了JavaScript多態(tài)與封裝的概念、功能、優(yōu)缺點(diǎn)以及相關(guān)問題與注意事項(xiàng),需要的朋友可以參考下2018-07-07
原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡單實(shí)例
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)圖片輪播與淡入效果的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法
這篇文章主要介紹了PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01