思路:
利用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ù)椒舵。