SLonger
5/21/2017 - 10:42 AM
To make the propgress.html work well you should make server load the html .
To make the propgress.html work well you should make server load the 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>