之前的文章《一招教你怎麼使用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
方式下載
<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>
優點
:支援
方式
缺點:還是該死的相容性問題
###所以處理相容性最好的方式還是###form###結合###iframe###(不考慮相容性當然還是###XMLHttpRequest ###最好),這種方式不論是上傳和下載都是完美支援的。上傳下載通用。 ######最好的上傳下載方式: 你們的###Boss###不要求相容###ie### 低版瀏覽器######[完]##### #推薦學習:###AJAX影片教學######以上是一文講解ajax實現無刷新上傳和下載(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!