SLonger/progress.html

## progress.html
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
	<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
    <span id="percentage"></span>
    <input type="file" id="uploadFile" multiple="multiple"/>
    <input type="button" value="提交" onclick="ajaxtSubmit()" />
</div>
</body>
</html>

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
	function uploadComplete(evt) {
		alert("上传成功！");
    }

    function uploadFailed(evt) {
        alert("上传失败！");
	}

	function progressFunction(evt) {
             var progressBar = document.getElementById("progressBar");
             var percentageDiv = document.getElementById("percentage");
			 console.log(evt.lengthComputable);
             <!-- if (evt.lengthComputable) { -->
                 <!-- progressBar.max = evt.total; -->
				 <!-- console.log(progressBar.max); -->
                 <!-- progressBar.value = evt.loaded; -->
                 <!-- percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; -->
             <!-- } -->

    }

	function ajaxtSubmit(){
		var files = document.getElementById("uploadFile").files;
		var formData = new FormData();
		for(var i=0;i<files.length;i++){
			formData.append("file",files[i]);
		}
		$.ajax({
			type: 'POST',
			url: "http://192.168.1.166:8080/receive",
			data: formData,
			contentType: false,
			processData: false,

			xhr: function(){
				var xhr=new window.XMLHttpRequest();
				xhr.upload.addEventListener("progress", progressFunction,false);
				xhr.addEventListener("load",uploadComplete,false );
				xhr.addEventListener("error",uploadFailed,false);
				return xhr;
			},
			success: function (data) {

			},
			error: function (e) {
			}
			});
		}

</script>
	<!DOCTYPE html>
	<html lang="ch">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div>
	<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
	<span id="percentage"></span>
	<input type="file" id="uploadFile" multiple="multiple"/>
	<input type="button" value="提交" onclick="ajaxtSubmit()" />
	</div>
	</body>
	</html>

	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
	function uploadComplete(evt) {
	alert("上传成功！");
	}

	function uploadFailed(evt) {
	alert("上传失败！");
	}

	function progressFunction(evt) {
	var progressBar = document.getElementById("progressBar");
	var percentageDiv = document.getElementById("percentage");
	console.log(evt.lengthComputable);
	<!-- if (evt.lengthComputable) { -->
	<!-- progressBar.max = evt.total; -->
	<!-- console.log(progressBar.max); -->
	<!-- progressBar.value = evt.loaded; -->
	<!-- percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; -->
	<!-- } -->

	}

	function ajaxtSubmit(){
	var files = document.getElementById("uploadFile").files;
	var formData = new FormData();
	for(var i=0;i<files.length;i++){
	formData.append("file",files[i]);
	}
	$.ajax({
	type: 'POST',
	url: "http://192.168.1.166:8080/receive",
	data: formData,
	contentType: false,
	processData: false,

	xhr: function(){
	var xhr=new window.XMLHttpRequest();
	xhr.upload.addEventListener("progress", progressFunction,false);
	xhr.addEventListener("load",uploadComplete,false );
	xhr.addEventListener("error",uploadFailed,false);
	return xhr;
	},
	success: function (data) {

	},
	error: function (e) {
	}
	});
	}

	</script>