模板查看页面上传文件时显示上传进度

src/main/webapp/WEB-INF/views/files.html

@@ -48,6 +48,7 @@
 		<button id="uploadButton" title="上传">
 			<i class="fa fa-cloud-upload upload" aria-hidden="true"> </i>
 		</button>
+		<span id="uploadProgress" hidden="true"></span>
 	</div>
 </body>
 

src/main/webapp/resources/css/files.css

@@ -84,8 +84,9 @@ button {
 
 #uploadContainer {
 	position: fixed;
-	top: 85%;
+	text-align: center;
 	left: 90%;
+	top: 85%;
 }
 
 i.upload {

src/main/webapp/resources/js/files/app.js

@@ -47,6 +47,10 @@ $("#uploadButton").click(function() {
 		},
 		showLoading : function() {
 			spinner = showLoading(spinner, spinnerContainer);
+		},
+		onprogress : function(progress) {
+			$("#uploadProgress").removeAttr("hidden");
+			$("#uploadProgress").text(progress + "%");
 		}
 	});
 });
@@ -58,8 +62,9 @@ $("#uploadButton").click(function() {
  *            文件路径
  */
 function listFiles(path) {
-	console.log("request... " + JSON.stringify(currentPath));
+	console.log("listFiles... " + JSON.stringify(currentPath));
 	$("#errorMessageContainer").attr("hidden", "true");
+	$("#uploadProgress").attr("hidden", "true");
 	$("#currentPath").text(currentPath.value);
 	if (!currentPath.parent) {
 		$("#parentPathContainer").attr("hidden", "true");

src/main/webapp/resources/js/util/utils.js

@@ -73,14 +73,15 @@ function upload(option) {
 	}
 	document.body.appendChild(input);
 	input.click();
+	// 选中文件
 	input.onchange = function() {
 		if (!input.value) {
 			return;
 		}
 		// 验证文件大小
-		console.log("selected... " + input.value);
 		for (var i = 0; i < input.files.length; i++) {
 			var file = input.files[i];
+			console.log("selected... " + file.name);
 			if (option.maxSize && file.size > option.maxSize * 1024 * 1024) {
 				alert("单个文件大小不能超过" + option.maxSize + "MB");
 				return;
@@ -99,6 +100,7 @@ function upload(option) {
 		var xhr = new XMLHttpRequest();
 		xhr.open("POST", option.url);
 		xhr.onreadystatechange = function() {
+			// 上传完成
 			if (xhr.readyState == 4) {
 				if (xhr.status == 200) {
 					if (option.success instanceof Function) {
@@ -111,9 +113,17 @@ function upload(option) {
 				}
 			}
 		}
+		// 展示加载动画
 		if (option.showLoading) {
 			option.showLoading();
 		}
+		// 上传进度
+		xhr.upload.onprogress = function(event) {
+			var progress = Math.floor(100 * event.loaded / event.total);
+			if (option.onprogress instanceof Function) {
+				option.onprogress(progress);
+			}
+		}
 		xhr.send(formData);
 	}
 }