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