第四步：编写前端代码。
1、路径在当前项目的：src\main\resources\asyn.html
上传进度条
align="center">
0%
bordercolor="#000000">
bgcolor="#FF0000" id="progress">
completed
var xhr = new XMLHttpRequest();
//上传失败
function uploadFailed(evt) {
document.getElementById("progressBar").style.visibility="hidden";
document.getElementById("complete").innerText ="上传异常！" ;
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
document.getElementById("progressBar").style.visibility="visible";
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
//document.getElementById("son").innerHTML =per +"%" ;
document.getElementById("progressPersent").innerText =per +"%" ;
document.getElementById("progress").style.width =per +"%" ;
}
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = document.getElementById("pic").files;
var formData = new FormData();
formData.append("file" , picFileList[0] );
//监听事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
xhr.open("POST", "testuploadimg",true);
//记得加入上传数据formData
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(xhr.responseText == "succes"){
document.getElementById("progress").style.width ="100%" ;
document.getElementById("progressPersent").innerText ="100%" ;
document.getElementById("complete").innerText ="上传成功！" ;
}else{
document.getElementById("complete").innerText ="上传失败！" ;
}
}
}
}
