一、建立幫助類

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);

        }

@Override
public 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);
    }
 };