XMLHttpRequest - 非同步上傳檔案及下載

上傳

FormData 对象的使用

var SelectForm = document.querySelector('#id_form_edit');
var fd = new FormData(SelectForm);
var xhr = new XMLHttpRequest();

xhr.addEventListener("load", function (j) {
    const json = JSON.parse(j.target.responseText);
    // json 回傳後處理
}, false);

xhr.open("POST", '/cs/v2/Question_concept/update_concept', true);
xhr.send(fd);

var SelectForm = document.querySelector('#id_form_edit');

var fd = new FormData(SelectForm);

var xhr = new XMLHttpRequest();

xhr.addEventListener("load", function (j) {

const json = JSON.parse(j.target.responseText);

// json 回傳後處理

}, false);

xhr.open("POST", '/cs/v2/Question_concept/update_concept', true);

xhr.send(fd);

下載

使用 ajax 來下載的好處是，對於 PHP 就不會有記憶體的壓力。以 PHP 輸出 Excel 為例，大資料時會遇到 Fatal error: Allowed memory size of 這類的錯誤，將程式改成只輸出不產生檔案，讓前端來組成檔案就不會有這個限制，也就是將

$objWriter->save("hoyo.xls");

1	$objWriter->save("hoyo.xls");

改成

$objWriter->save('php://output');

1	$objWriter->save('php://output');

然後就可以使用下面的方法存成檔案

Prompt file download with XMLHttpRequest

function saveBlob(blob, fileName) {
    let a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    a.dispatchEvent(new MouseEvent('click'));
}

const SelectForm = document.querySelector('#id_form_question_check');
const fd = new FormData(SelectForm);
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open("POST", '/cs/v2/download_excel', true);

xhr.onload = function (e) {
    $.LoadingOverlay("hide");
    var blob = e.currentTarget.response;
    var contentDispo = e.currentTarget.getResponseHeader('Content-Disposition');
    saveBlob(blob, '試題檢查_'+ date('YmdHis') +'.xls');
};

xhr.send(fd);

function saveBlob(blob, fileName) {

let a = document.createElement('a');

a.href = window.URL.createObjectURL(blob);

a.download = fileName;

a.dispatchEvent(new MouseEvent('click'));

}

const SelectForm = document.querySelector('#id_form_question_check');

const fd = new FormData(SelectForm);

const xhr = new XMLHttpRequest();

xhr.responseType = 'blob';

xhr.open("POST", '/cs/v2/download_excel', true);

xhr.onload = function (e) {

$.LoadingOverlay("hide");

var blob = e.currentTarget.response;

var contentDispo = e.currentTarget.getResponseHeader('Content-Disposition');

saveBlob(blob, '試題檢查_'+ date('YmdHis') +'.xls');

};

xhr.send(fd);

多檔案下載

本來是要將檔案帶在 JSON 陣列內，將二進制 encode Base64，到前端再 decode ，結果 JavaScript decode 二進制 Base64 有問題，無法 100% 還原，所以就使用前端迴圈的方式來下載

這個範例和前面不同的是多了一個檢查下載檔案大小是否大於 0

function saveBlob(blob, fileName) {
    let a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    a.dispatchEvent(new MouseEvent('click'));
}

function download_word(){
    let $q = explode(',', $('#id_form').find('[name="subject"]').val());

    $.each( $q, function(k,v){
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.open("POST", '/download_word/' + v, true);

        xhr.onload = function (e) {
            let blob = e.currentTarget.response;
            console.log(blob.size);
            if ( blob.size > 0 ) saveBlob(blob, 'html_'+ v + '.doc');
        };
        xhr.send();
    } );
}

function saveBlob(blob, fileName) {

let a = document.createElement('a');

a.href = window.URL.createObjectURL(blob);

a.download = fileName;

a.dispatchEvent(new MouseEvent('click'));

}

function download_word(){

let $q = explode(',', $('#id_form').find('[name="subject"]').val());

$.each( $q, function(k,v){

const xhr = new XMLHttpRequest();

xhr.responseType = 'blob';

xhr.open("POST", '/download_word/' + v, true);

xhr.onload = function (e) {

let blob = e.currentTarget.response;

console.log(blob.size);

if ( blob.size > 0 ) saveBlob(blob, 'html_'+ v + '.doc');

};

xhr.send();

} );

}

new FormData 除了原表單還要附加資料

FormData.append()

function SubmitComplete(){
    // ....
}

var fd = new FormData(SelectForm);
fd.append('Name', 'ABC 999');

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", SubmitComplete, false);
xhr.open("POST", "?a=Admin/Supervisor&b=Update&t=" + Math.random(),true);
xhr.send(fd);

function SubmitComplete(){

// ....

}

var fd = new FormData(SelectForm);

fd.append('Name', 'ABC 999');

var xhr = new XMLHttpRequest();

xhr.addEventListener("load", SubmitComplete, false);

xhr.open("POST", "?a=Admin/Supervisor&b=Update&t=" + Math.random(),true);

xhr.send(fd);

624 total views, 1 views today

XMLHttpRequest - 非同步上傳檔案及下載

上傳

下載

多檔案下載

new FormData 除了原表單還要附加資料

Related Post

發佈留言

XMLHttpRequest - 非同步上傳檔案及下載

上傳

下載

多檔案下載

new FormData 除了原表單還要附加資料

Related Post

網頁的前、後端如何區分

PWA 漸進式網路應用程式 - 3. 桌面版瀏覽網頁通知

網頁前端 - 滑鼠點擊特效

發佈留言