javaweb實現檔案上傳進度條功能
一、建立幫助類
package com.xxxx.xxxx.util;
public class Progress {
private long bytesRead;
private long contentLength;
private long items;
public long getBytesRead() {
return bytesRead;
}
public void setBytesRead(long bytesRead) {
this.bytesRead = bytesRead;
}
public long getContentLength() {
return contentLength;
}
public void setContentLength(long contentLength) {
this.contentLength = contentLength;
}
public long getItems() {
return items;
}
public void setItems(long items) {
this.items = items;
}
@Override
public String toString(){
return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";
}
}
二、建立監聽類FileUploadProgressListener實現ProgressListener介面
package com.xxxx.xxxx.util;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;
@Component
public class FileUploadProgressListener implements ProgressListener{
private HttpSession session;
public void setSession(HttpSession session){
this.session=session;
Progress status = new Progress();//儲存上傳狀態
session.setAttribute("status", status);
}
@Overridepublic void update(long bytesRead, long contentLength, int items){
Progress status = (Progress) session.getAttribute("status");
status.setBytesRead(bytesRead);
status.setContentLength(contentLength);
status.setItems(items);
}
}
三、在檔案上傳的ajax中監聽檔案上傳
//上傳資料包檔案方法
function UpladFile() {var excleFileTxtVal=$("#excleFileTxt").val();
var datafileuuid=excleFileTxtVal.substring(excleFileTxtVal.indexOf("/")+8,excleFileTxtVal.indexOf("."));
var fileObj = $("#dataFileBtn").get(0).files[0]; // js 獲取檔案物件
console.info("上傳的檔案:"+fileObj);
// 接收上傳檔案的後臺地址
var FileController = "<%=host%>/xxxxx/xxxxxxx.do";
// FormData 物件
var form = new FormData();
form.append("fileNewName", datafileuuid);
form.append("file", fileObj); // 檔案物件
// XMLHttpRequest 物件
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.onload = function() {
var responseText = xhr.responseText;
console.log(responseText)
var myResult=JSON.parse(responseText).result;
var myPath=JSON.parse(responseText).path;
if(myResult=="ok"){
$.msgbox.AlertRightCall("溫馨提示","資料包上傳成功!",function(){
$("#dataUploadFileBtn").attr('disabled', true);
$("#batchAddBtn").attr('disabled', false);
$("#progressBar").parent().removeClass("active");$("#progressBar").parent().hide();
$("#dataFileTxt").val(myPath);
})
}else{
$.msgbox.AlertTip("溫馨提示","服務忙,資料包上傳失敗,請稍後再試!")
}
};
xhr.send(form);
}
function progressFunction(evt) {
var progressBar = $("#progressBar");
if (evt.lengthComputable) {
var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";
progressBar.width(completePercent);
$("#uploadNum").html("上傳完成 " + completePercent);
}
};