Browse Source

文件上传支持传入账套参数、显示上传进度

sunyj 9 years ago
parent
commit
0a54c95724

+ 1 - 2
src/main/java/com/uas/report/controller/UploadController.java

@@ -25,8 +25,7 @@ public class UploadController {
 		if (StringUtils.isEmpty(userName)) {
 			message = "未传入当前账套用户名!";
 			logger.error(message);
-			// return message;
-			userName = "UAS";
+			return message;
 		}
 
 		if (file == null || file.isEmpty()) {

+ 2 - 2
src/main/webapp/WEB-INF/webmvc.xml

@@ -36,7 +36,7 @@
 	<mvc:view-controller path="/viewer" view-name="/pdf.js/web/viewer.html" />
 	<mvc:view-controller path="/preview"
 		view-name="/static/view/preview.html" />
-	<mvc:view-controller path="/testupload.html"
-		view-name="/static/view/testupload.html" />
+	<mvc:view-controller path="fileUpload"
+		view-name="/static/view/file_upload.html" />
 
 </beans>

+ 55 - 0
src/main/webapp/resources/js/upload.js

@@ -0,0 +1,55 @@
+var size = 0;
+
+// 绑定所有type=file的元素的onchange事件的处理函数
+$(':file').change(function() {
+	var file = this.file;
+	name = file.name;
+	size = file.size;
+	type = file.type;
+	url = window.URL.createObjectURL(file);
+});
+
+function upload() {
+	// 创建FormData对象,初始化为form表单中的数据
+	var formData = new FormData($('form')[0]);
+	formData.append('userName', 'UAS');
+
+	// 显示进度
+	$('#progressDiv').css("display", "block");
+	// $('#progressDiv').toggle();
+	// ajax异步上传
+	$.ajax({
+		url : "upload",
+		type : "POST",
+		data : formData,
+		xhr : function() {
+			myXhr = $.ajaxSettings.xhr();
+			if (myXhr.upload) {
+				// 绑定progress事件的回调函数
+				myXhr.upload.addEventListener('progress',
+						progressHandlingFunction, false);
+			}
+			return myXhr;
+		},
+		success : function(result) {
+			$("#result").html(result.data);
+		},
+		contentType : false,
+		processData : false
+	});
+
+}
+
+// 上传进度回调函数:
+function progressHandlingFunction(e) {
+	if (e.lengthComputable) {
+		$('progress').attr({
+			value : e.loaded,
+			max : e.total
+		}); // 更新数据到进度条
+		var percent = e.loaded / e.total * 100;
+		$('#progress').html(
+				e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2)
+						+ "%");
+	}
+}

+ 25 - 0
src/main/webapp/resources/view/file_upload.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Insert title here</title>
+<script
+	src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+<script src="static/js/upload.js"></script>
+
+</head>
+<body>
+	<form method="post" enctype="multipart/form-data">
+		选择要上传的文件:<br /> <br /> <input type="file" name="file" /><br /> <br />
+	</form>
+	<input type="button" value="Upload" onclick="upload()" />
+	<br />
+	<div id="progressDiv" hidden="true">
+		<br /> 上传进度:
+		<progress></progress>
+		<br />
+		<p id="progress">0 bytes</p>
+		<p id="info"></p>
+	</div>
+</body>
+</html>

+ 0 - 12
src/main/webapp/resources/view/testupload.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Insert title here</title>
-</head>
-<body>
-	<form action="upload" method="post" enctype="multipart/form-data">
-		<input id="file" type="file" name="file" /> <input type="submit" value="upload" />
-	</form>
-</body>
-</html>