AJAX實現上傳進度條（Django）

阿新 • • 發佈：2019-01-18

昨天研究了一天檔案上傳進度條的實現，折騰了一天終於是完成了，期間遇到了各種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新增一個元素，即file
			xhr.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()

AJAX實現上傳進度條（Django）

昨天研究了一天檔案上傳進度條的實現，折騰了一天終於是完成了，期間遇到了各種BUG，讓人不禁淚落。這裡，我們將使用最少量的AJAX來實現這個功能，沒有任何對瀏覽器支援性的檢測，這樣更容易明白。還有一點需要說明的是，後臺也是應該來摻和一腳（配合）的，當然，非常簡單，只要確認接

php+ajax檔案上傳進度條

demo.php - 上傳過程處理 PLAIN TEXTPHP: <?php include 'UploadProgressMeter.class.php'; fileWidget = new UploadProgressMeter(); if (fileWidget

自定義View實現圓形水波進度條（下）

來源：伯樂線上專欄作者 - Code4Android 連結：http://android.jobbole.com/84776/ 接上文通過效果圖，我們看到實現此效果就是不斷的更新進度值，然後重繪，，那麼我們只需開啟一個執行緒實現更新進度值，為了更好的控制我們再

ajax FormData上傳檔案和資料，上傳進度條顯示

http://www.jb51.net/article/114003.htm 一、基於input 方式formData上傳檔案和資料： <divclass="startleft describebox"> <labelclass="title">商

一鍵jquery非同步上傳檔案（圖片）的實現（檔案上傳進度讀取未做）

本文采用boostrap、、jquery、jade（html的一種模板）、nodejs實現最終實現的效果：一個按鈕在選擇完檔案後，自動上傳到後臺； -改變input樣式在form表單中，用<a>包裹<input type="file">，讓i

servlet+jquery實現檔案上傳進度條

現在檔案的上傳，特別是大檔案上傳，都需要進度條，讓客戶知道上傳進度。本文簡單記錄下如何弄進度條，以及一些上傳資訊，比如檔案的大小，上傳速度，預計剩餘時間等一些相關資訊。程式碼是匆忙下簡單寫的，一些驗證沒做，或程式碼存在一些隱患，不嚴謹的地方。本文程

自定義View實現圓形水波進度條（上）

來源：伯樂線上專欄作者 - Code4Android 連結：http://android.jobbole.com/84776/ 每次聽到某大牛談論自定義View，頓時敬佩之心，如滔滔江水連綿不絕，心想我什麼時候能有如此境界，好了，心動不如行動，於是我開始了自定義View之路，雖然過程有坎坷，但是

SpringMVC實現的檔案上傳進度條Bootstrap展示

背景想做一個帶進度條的檔案上傳，可是搜尋的結果都不是很滿意，最後參考一個實踐了一下，基於SpringMVC實現，前端採用Bootstrap。整理一下進度條的實現。效果先看最後的效果實現步驟前提 SpringMVC已經配置

javaweb實現檔案上傳進度條功能

一、建立幫助類package com.xxxx.xxxx.util;public class Progress {private long bytesRead; private long contentLength; private long items;

SpringMVC-實現PUT請求上傳文件（轉）

Enctype multi think pic 不可 form OS his win 因為在圖片上傳的時候使用的是二進制的方式上傳，所以使用隱藏域進行方法轉換方式失效，轉方法： https://www.cnblogs.com/morethink/p/6378015.html

js 檔案下載/上傳進度條

/** * 下載檔案 - 帶進度監控 * @param url: 檔案請求路徑 * @param params: 請求引數 * @param name: 儲存的檔名 * @param progress: 進度處理回撥函式 * @param success: 下載完成回

selenium+python實現檔案上傳的方法（1）

檔案上傳上傳檔案是比較常見的web端操作，但是在selenium的webdriver中沒有專門用於上傳的方法，下面介紹send_keys上傳方式實現上傳檔案首先建立一個html檔案，主要實現上傳功能 upload file 頁面長這個樣子（每個瀏覽器裡頁面可能長得不一樣）：

ajax實現上傳檔案和form表單上傳檔案的區別

在使用form表單的時候,一旦點選提交觸發submit事件，一般會使得頁面跳轉，頁面間的跳轉等行為的控制權往往在後端，後端會控制頁面的跳轉及資料傳遞，但是在某些時候不希望頁面跳轉，或者說想要將控制權放在前端，通過js來操作頁面的跳轉或者資料變化。一般這種非同步的操作，我們

ssm框架實現圖片上傳並顯示（myeclips）

ssm框架實現圖片上傳並顯示第一步：匯入common-io以及common-fileupload兩個jar包，儘量新一點，老的有可能出錯第二步：配置圖片上傳儲存的位置，針對myeclips來說，開啟檔案D:\Java\MyEclipse.metadata.me_tcat\co

JAVA實現客戶端圖片上傳至伺服器（SSM）（不使用input 標籤使用，瀏覽器圖片直接上傳伺服器）

JAVA實現客戶端圖片上傳至伺服器（SSM）（不使用input 標籤使用，瀏覽器圖片直接上傳伺服器）這是本人第一篇部落格想著記錄一下平時學習的過程，也提供給和我一樣正在學習java的同學們！！（如果有不懂的同學歡迎留言有時間一定回覆，寫的不好的地方請多包涵） * 開始：首先要

jQuery外掛 ajax實現上傳例項

ajaxFileUpload.js 很多同名的，因為做出來一個很容易。我用的是這個:https://github.com/carlcarl/AjaxFileUpload 下載地址在這裡：http://files.cnblogs.com/files/kissdodog/a

H5移動端多圖上傳+進度條

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！

最近說專案可能會用到一個電子簽名，不需要識別的那種，只是一個單純手寫簽名，然後以base64的格式提供給前端web頁面。其實挺簡單的，自定義一個手寫view就上線了。Android 電子簽名，手寫簽名案列實現方法！先上圖：按鈕說明：第一個按鈕是清除手寫板，第二個是將手寫板的

檔案上傳進度條顯示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> <style>

Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

目錄前言　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----檔案上傳，示例以一個上傳圖片的功能為例子　　上傳功能命名用formidable實現，示例很簡單! 　　PS：最近比較忙，距上一次更新已經比較久了^_^! formidable簡介　　nodejs

AJAX實現上傳進度條（Django）

相關推薦