昨天研究了一天檔案上傳進度條的實現，折騰了一天終於是完成了，期間遇到了各種BUG，讓人不禁淚落。
這裡，我們將使用最少量的AJAX來實現這個功能，沒有任何對瀏覽器支援性的檢測，這樣更容易明白。還有一點需要說明的是，後台也是應該來摻和一腳（配合）的，當然，非常簡單，只要確認接受這個檔案就行（後面將說明）。我使用的是Django架構來做的後台。
沒什麼好多說的，先上代碼，代碼中會給出詳細的解釋。先給出前端的：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>function on_progress(evt) { //看這個函數之前先看upload函數。這個函數可以接收一個evt(event)對象(細節自行查詢progress)，他有3個屬性lengthComputable，loaded，total，第一個屬性是個bool類型的，代表是否支援，第二個代表當前上傳的大小，第三個為總的大小，由此便可以計算出即時上傳的百分比if(evt.lengthComputable) {var ele = document.getElementById('2');var percent = Math.round((evt.loaded) * 100 / evt.total);ele.style.width = percent + '%';document.getElementById('3').innerHTML = percent + '%';}}function upload() {var xhr = new XMLHttpRequest();var file = document.getElementById('file').files[0]; //取得檔案資料，而.file對象只是檔案資訊var form = new FormData(); //FormData是HTML5為實現序列化表單而提供的類，更多細節可自行查詢 form.append('file',file); //這裡為序列化表單對象form添加一個元素，即filexhr.upload.addEventListener('progress',on_progress,false); //xhr對象含有一個upload對象，它有一個progress事件，在檔案上傳過程中會被不斷觸發，我們為這個事件對應一個處理函數，每當事件觸發就會調用這個函數，於是便可利用這個函數來修改當前進度，更多細節可自行查詢xhr.open('POST','http://127.0.0.1:8000/upload/',true); //請將url改成上傳url xhr.setRequestHeader('X-CSRFTOKEN','{{ request.COOKIES.csrftoken }}'); //此處為Django要求，可無視，或者換成相應後台所要求的CSRF防護，不是django使用者請去掉xhr.send(form); //發送表單}</script></head><body><form> {% csrf_token %} //Django要求，不是Django使用者請去除<div id='1' style="height:20px;width:100px;border:2px solid gray;float:left;margin-right:10px;"><div id='2' style="height:100%;width:0px;background:gray;"></div></div><b style="margin-right:20px" id='3'>0%</b><input type="file" id='file' class='file' name="file"><br><br><button type="button" onclick="upload();">上傳</button></form></body></html>
好了，前端的事情已經幹完了，接下來就是確保後台不會拒絕，也就是確認接受這個檔案，當然還有一點便是上傳介面也要由後台來提供，否則會出現跨域提交失敗。在Django中大概就是下面這樣：
urls.py有下面2個模式比對
url(r'^upload_page/$', upload_page)url(r'^upload/$', upload)
views.py有下面2個請求處理函數def upload_page(request): return render(request,'upload_page.html') #這裡upload_page便是上面的前端html檔案def upload(request): file = request.FILES #一定要調用上傳的檔案（不管你幹嘛，儲存也好，啥也不幹也好，反正不調用就出錯了，估計是預設不調用就不接收吧。。）才能用ajax上傳成功，否則報錯，原因不明 return HttpResponse()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
