第四步：編寫前端代碼。

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 ="上傳失敗！" ;

}

}

}

}

總結

以上是生活随笔為你收集整理的java 上传 进度条_Ajax上传文件并显示进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。