ajax上傳文件及進度顯示


之前在博文:原生ajax寫法就提及過ajax2.0與1.0的差別是多了FormData和利用FormData文件上傳(當然還有跨域,但不是本文的重點)。

那么具體怎么樣實現ajax上傳文件呢?

一般來說,瀏覽器獲取文件的方法有拖拽input_file兩種:

// 先定義一個放文件的數組
var files = [];
//拖拽事件獲取文件
div.addEventListener('drop',function(ev){
    //因為dataTransfer.files只是類數組,所以要用Array.from轉換一下
    files = files.concat(Array.from(ev.dataTransfer.files));
},false)

// 從input_file獲取files,假設有n個name為f1的input_file元素
let input_files = Array.from(document.getElementsByName('f1'));
uploadBtn.onclick = function(){
    input_files.forEach(input=>{
         files = files.concat(Array.from(input.files));
    })
    let formData = new FormData();
    files.forEach(file=>{
        formData.append('name~~',file);
    })
    let xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(ev){
        console.log('進度:'+(100*ev.loaded/ev.total).toFixed(2)+'%');
    }
    xhr.open('POST','url~~',true);
    xhr.send(formData);
    xhr.onreadystatechange = function(){
       if(this.readyState == 4){
           if(this.status==200){
              alert('上傳成功~~');
              files = [];
           }
       }
    }
}

ps:進度的顯示那里,博主之前一直寫錯為xhr.onprogress,如果寫成這樣,那么進度過程就不會出現,直接讓你等待,直到100%才顯示

記住上傳的時候無論是onprogressonload還是onerror,都是xhr.upload對象下的事件才會生效,否則就會檢測不了上傳的過程,特別是xhr.upload.onprogress


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM