使用js對象formData+ajax方法實作檔案的上傳

綜述：對這個方法進行總結，在檔案上傳中還是很有用處的

DOM

<input type="file" id="file">
           

一、建立FormData放入待上傳檔案

//準備FormData對象
var formData = new FormData(),
    uploadFile = document.getElementById('file');
    
//将檔案放入FormData對象中    
formData.append('file', uploadFile.files[0]);
           

二、通過xhr發送FormData資料到伺服器，實作檔案上傳

//建立xhr對象
var xhr = new XMLHttpRequest();

//監聽檔案上傳進度
xhr.upload.onprogress = function(evt){
    //lengthComputabel: 檔案長度是否可計算
    if(evt.lengthComputable){
        //evt.loaded: 已下載下傳的位元組數
        //evt.total: 檔案總位元組數
        var percent = Math.round(evt.loaded*100/evt.total);
        console.log(percent);
    }
}

//監聽檔案傳輸開始    
xhr.onloadstart = function(evt）{
        xhr.abort() //終止上傳
}

//監聽ajax成功完成事件
xhr.onload = function(evt){
    ...
}
           

三.前端導出後端的資料

window.open(urlAddress);  //直接建立一個視窗，并通路後端的接口即可