之前的文章《一招教你怎麼使用window掛載EFI分割區（附程式碼）》中，跟大家介紹了怎麼使用window掛載EFI分割區。以下這篇文章給大家了解ajax實現無刷新上傳和下載，有需要的朋友可以參考一下，希望對你們有所助。
關於ajax無刷新上傳和下載
這是一個沒什麼含量但是又用的比較多又不得不說的問題，其實真的不想說，因為沒什麼好說的。
關於上傳
使用Flash, ActiveX上傳，略...
自己寫XMLHttpRequest
// 准备FormData
var formData = new FormData();
formData.append("key", value);
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听状态，实时响应
// 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过程发生错误事件
xhr.onerror = function (event) {
console.log("error");
};
// ajax被取消
xhr.onabort = function (event) {
console.log("abort");
};
// loadend传输结束，不管成功失败都会被触发
xhr.onloadend = function (event) {
console.log("load end");
};
// 发起ajax请求传送数据
xhr.open("POST", "/upload", true);
xhr.send(formData);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吖的是個半殘品。所以這要說的是第三種結合form和iframe來實現，原理：
隱藏的form和iframe ，form的target指向iframe，監聽iframe load，來取得上傳結果。
優點：相容於該死的ie低版瀏覽器
缺點：跨網域上傳不支持，還需自訂反向代理，因為iframe onload 不支援跨域
上傳介面API： 成功返回：
{
code: 1,
msg: '上传成功'
}失敗回傳：
{
code: 0,
msg: '上传失败'
}HTML：
# #
<form
action="xxxx"
target="upload"
enctype="multipart/form-data"
method="post"
style="display:none; "
>
... ..
</form>
<iframe name="upload" id="upload"></iframe>
<!-- JS: -->
<script>
var fm = document.getElementById("upload");
var load = function () {
var doc = fm.contentWindow || fm.contentDocument;
if (doc.document) doc = doc.document;
var content = doc.body.textContent; //此处的值取决与API 接口返回的值
var data = JSON.parse(content);
console.log(content);
};
// 兼容低版本浏览器监听判断
fm.attachEvent ? fm.attachEvent("onload", load) : (fm.onload = load);
</script>關於下載：暴力一點的下載直接
window.open("/rest/donwload/abcd.do");優點：程式碼量少。 缺點：現代瀏覽器會自動辨識文件類型，如
pdf，會自動在瀏覽器開啟優雅一點的下載：
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();
}優點：解決了暴力下載自動開啟檔案的缺陷
#缺點：不支援post方式下載
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function download() {
var url = "download/?filename=aaa.txt";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // 也可以使用POST方式，根据接口
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
reader.onload = function (e) {
// 转换完成，创建一个a标签用于下载
var a = document.createElement("a");
a.download = "data.xlsx";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
};
}
};
// 发送ajax请求
xhr.send();
}</pre><div class="contentsignin">登入後複製</div></div><code>優點：支援post
方式
缺點：還是該死的相容性問題
###所以處理相容性最好的方式還是###form###結合###iframe###（不考慮相容性當然還是###XMLHttpRequest ###最好），這種方式不論是上傳和下載都是完美支援的。上傳下載通用。 ######最好的上傳下載方式： 你們的###Boss###不要求相容###ie### 低版瀏覽器######[完]##### #推薦學習：###AJAX影片教學######以上是一文講解ajax實現無刷新上傳和下載（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
