之前在博文:原生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%才顯示
記住上傳的時候無論是onprogress、onload還是onerror,都是xhr.upload對象下的事件才會生效,否則就會檢測不了上傳的過程,特別是xhr.upload.onprogress