ajax如何實現(xiàn)無刷新上傳和下載
這篇文章主要介紹了ajax如何實現(xiàn)無刷新上傳和下載，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10余年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營銷推廣解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都三輪攪拌車等企業(yè)，備受客戶贊譽。
關(guān)于上傳
使用Flash, ActiveX上傳 ，略...
自己寫XMLHttpRequest
// 準(zhǔn)備FormData
var formData = new FormData();
formData.append("key", value);
// 創(chuàng)建xhr對象
var xhr = new XMLHttpRequest();
// 監(jiān)聽狀態(tài)，實時響應(yīng)
// xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進度，xhr.upload.progress是上傳進度
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percent = Math.round(event.loaded / event.total);
console.log("%d%", percent);
}
};
// 傳輸開始事件
xhr.onloadstart = function (event) {
console.log("load start");
};
// ajax過程成功完成事件
xhr.onload = function (event) {
console.log("load success");
console.log(xhr.responseText);
var ret = JSON.parse(xhr.responseText);
console.log(ret);
};
// ajax過程發(fā)生錯誤事件
xhr.onerror = function (event) {
console.log("error");
};
// ajax被取消
xhr.onabort = function (event) {
console.log("abort");
};
// loadend傳輸結(jié)束，不管成功失敗都會被觸發(fā)
xhr.onloadend = function (event) {
console.log("load end");
};
// 發(fā)起ajax請求傳送數(shù)據(jù)
xhr.open("POST", "/upload", true);
xhr.send(formData);使用Jquery
var formData = new FormData();
formData.append("key", value); //傳的參和值
$.ajax({
url: "XXX",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (res) {},
error: function () {},
});這里要說的就是formData，這個狗屎在IE10之后才開始完整的支持，IE9吖的是個半殘品。所以這要說的是第三種結(jié)合form和iframe來實現(xiàn)，原理：
隱藏的form和iframe，form的target指向iframe，監(jiān)聽iframe load，來獲取上傳結(jié)果。
優(yōu)點：兼容該死的ie低版本瀏覽器
缺點：跨域上傳不支持，還需自定義反向代理，因為iframe onload不支持跨域
上傳接口API： 成功返回：
{
code: 1,
msg: '上傳成功'
}失敗返回：
{
code: 0,
msg: '上傳失敗'
}HTML：
關(guān)于下載：
暴力一點的下載直接
window.open("/rest/donwload/abcd.do");優(yōu)點：代碼量少。
缺點：現(xiàn)代瀏覽器會自動識別文件類型，如pdf，會自動在瀏覽器打開
優(yōu)雅一點的下載：
function download() {
var a = document.createElement("a");
var url = "download/?filename=aaa.txt";
var filename = "data.xlsx";
a.href = url;
a.download = filename;
a.click();
}優(yōu)點：解決了暴力下載自動打開文件的缺陷
缺點：不支持post方式下載
使用XMLHttpRequest，BLOB方式
function download() {
var url = "download/?filename=aaa.txt";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // 也可以使用POST方式，根據(jù)接口
xhr.responseType = "blob"; // 返回類型blob
// 定義請求完成的處理函數(shù)，請求前也可以增加加載框/禁用下載按鈕邏輯
xhr.onload = function () {
// 請求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 轉(zhuǎn)換為base64，可以直接放入a表情href
reader.onload = function (e) {
// 轉(zhuǎn)換完成，創(chuàng)建一個a標(biāo)簽用于下載
var a = document.createElement("a");
a.download = "data.xlsx";
a.href = e.target.result;
$("body").append(a); // 修復(fù)firefox中無法觸發(fā)click
a.click();
$(a).remove();
};
}
};
// 發(fā)送ajax請求
xhr.send();
}優(yōu)點：支持post方式
缺點：還是該死的兼容性問題
所以處理兼容性最好的方式 還是form結(jié)合iframe（不考慮兼容性當(dāng)然還是XMLHttpRequest最好），這種方式不論是上傳和下載 都是完美支持的。上傳下載通用。
最好的上傳下載方式： 你們的Boss不要求兼容ie低版本瀏覽器
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ajax如何實現(xiàn)無刷新上傳和下載”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
分享名稱：ajax如何實現(xiàn)無刷新上傳和下載
網(wǎng)站URL：http://m.jiaotiyi.com/article/jsidip.html