無刷新上傳文件(支持ie8+)

思路:

利用form表單提交文件,然后提交成功后跳轉(zhuǎn)到iframe 里面韧掩,把這個(gè)iframe 隱藏掉,然后返回的信息就渲染到iframe 里面,再獲取iframe 里面的內(nèi)容俄删。
(這里瀏覽器會(huì)報(bào)有關(guān)X-Frame-Options 的問題,解決辦法:https://stackoverflow.com/questions/28647136/how-to-disable-x-frame-options-response-header-in-spring-security

如果只需要兼容ie9+,可以使用formData,再使用ajax異步上傳即可奏路。

下面是兼容ie8的做法

html

 <div class="upload-file">
     <div class="uf-button">
         <form id="uf-form" method="post" 
                action="/uploadAnnex" 
                target="uf-frame"  
                encoding="multipart/form-data" 
                enctype="multipart/form-data">
                <button id="uf-btn-upload" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                          添加
                </button>
                <input id="uf-input-upload" type="file" name="file"/>
            </form>
            <iframe id="uf-frame" name="uf-frame" style="visibility:hidden;height: 0;border: 0;"></iframe>
    </div>
</div>

css

 .upload-file .uf-button form {
            position: relative;
}

.upload-file .uf-button form input {
    position: absolute;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 100%;
     width: 100%;
}

這里要特別注意畴椰,要把input 放在最上面然后設(shè)透明度為0。否則鸽粉,由于ie8的安全機(jī)制斜脂,如果通過其它方式去觸發(fā)input[type="file"]的點(diǎn)擊事件,最終會(huì)獲取不到input[type="file"] 的文件触机,導(dǎo)致表單上傳的文件為空帚戳。

js

$('#uf-input-upload').on('change', function (e) {
    if (e.target.value.length>0) {
        $('#uf-form').submit();
        console.log("上傳文件");
    }
});
//監(jiān)聽frame的load事件判斷是否有返回信息
$('#uf-frame').on('load', function () {
    var response = $("#uf-frame").contents().find("body").html();
    console.log(response);
    if (response.length > 0) {
        try {
            response = JSON.parse(response);
           console.log("返回的信息:"+response );
    } else {
        message.add("上傳文件失敗", "error");
    }

});

這里要注意,由于返回的信息用iframe 接受儡首,所以要返回text销斟,然后再解析,而不要直接返回json格式的數(shù)據(jù)椒舵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚂踊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子笔宿,更是在濱河造成了極大的恐慌犁钟,老刑警劉巖棱诱,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涝动,居然都是意外死亡迈勋,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門醋粟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來靡菇,“玉大人,你說我怎么就攤上這事米愿∠梅铮” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵育苟,是天一觀的道長较鼓。 經(jīng)常有香客問我,道長违柏,這世上最難降的妖魔是什么博烂? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮漱竖,結(jié)果婚禮上禽篱,老公的妹妹穿的比我還像新娘。我一直安慰自己馍惹,他們只是感情好躺率,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著讼积,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脚仔。 梳的紋絲不亂的頭發(fā)上勤众,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音鲤脏,去河邊找鬼们颜。 笑死,一個(gè)胖子當(dāng)著我的面吹牛猎醇,可吹牛的內(nèi)容都是我干的窥突。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼硫嘶,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼阻问!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起沦疾,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤称近,失蹤者是張志新(化名)和其女友劉穎第队,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刨秆,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凳谦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了衡未。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尸执。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖缓醋,靈堂內(nèi)的尸體忽然破棺而出如失,到底是詐尸還是另有隱情,我是刑警寧澤改衩,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布岖常,位于F島的核電站,受9級(jí)特大地震影響葫督,放射性物質(zhì)發(fā)生泄漏竭鞍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一橄镜、第九天 我趴在偏房一處隱蔽的房頂上張望偎快。 院中可真熱鬧,春花似錦洽胶、人聲如沸晒夹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丐怯。三九已至,卻和暖如春翔横,著一層夾襖步出監(jiān)牢的瞬間读跷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工禾唁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留效览,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓荡短,卻偏偏與公主長得像丐枉,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子掘托,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容