AJAX實現上傳進度條(Django)

來源:互聯網
上載者:User

昨天研究了一天檔案上傳進度條的實現,折騰了一天終於是完成了,期間遇到了各種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()

 
 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.