（3）新建上傳文件的Servlet實現(xiàn)類UpLpad。在該類中編寫實現(xiàn)文件上傳的方法uploadFile()，在該方法中通過Common-FileUpload組件實現(xiàn)分段上傳文件，并計算上傳百分比，實時保存到Session中，關(guān)鍵代碼如下：

public void uploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //定義指定上傳進(jìn)度的Session變量
String error = "";
int maxSize=50*1024*1024; //單個上傳文件大小的上限
DiskFileItemFactory factory = new DiskFileItemFactory(); //創(chuàng)建工廠對象
ServletFileUpload upload = new ServletFileUpload(factory); //創(chuàng)建一個新的文件上傳對象
try {
List items = upload.parseRequest(request); // 解析上傳請求
Iterator itr = items.iterator(); // 枚舉方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //獲取FileItem對象
if (!item.isFormField()) { // 判斷是否為文件域
if (item.getName() != null && !item.getName().equals("")) {//是否選擇了文件
long upFileSize=item.getSize(); //上傳文件的大小
String fileName=item.getName(); //獲取文件名
if(upFileSize>maxSize){
error="您上傳的文件太大，請選擇不超過50M的文件";
break;
}
// 此時文件暫存在服務(wù)器的內(nèi)存中
File tempFile = new File(fileName); //構(gòu)造文件目錄臨時對象
String uploadPath = this.getServletContext().getRealPath("/upload");
File file = new File(uploadPath,tempFile.getName()); 
InputStream is=item.getInputStream();
int buffer=1024; //定義緩沖區(qū)的大小
int length=0;
byte[] b=new byte[buffer];
double percent=0;
FileOutputStream fos=new FileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D; //計算上傳文件的百分比
fos.write(b,0,length); //向文件輸出流寫讀取的數(shù)據(jù)
session.setAttribute("progressBar",Math.round(percent)); 
}
fos.close();
Thread.sleep(1000); //線程休眠1秒
} else {
error="沒有選擇上傳文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "上傳文件出現(xiàn)錯誤：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
}else {
request.setAttribute("result", "文件上傳成功！");
request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);
}
}

（4）在文件上傳頁index.jsp中，導(dǎo)入編寫的Ajax請求方法的request.js文件，并編寫獲取上傳進(jìn)度的Ajax請求方法和Ajax回調(diào)函數(shù)，關(guān)鍵代碼如下：

var request = false;
function getProgress(){ 
var url="showProgress.jsp"; //服務(wù)器地址
var param ="nocache="+new Date().getTime(); //每次請求URL參數(shù)都不同 ，避免上傳時進(jìn)度條不動
request=httpRequest("post",url,true,callbackFunc,param); //調(diào)用請求方法 
}
//Ajax回調(diào)函數(shù)
function callbackFunc(){
if( request.readyState==4 ){ //判斷響應(yīng)是否完成 
if( request.status == 200 ){ //判斷響應(yīng)是否成功
var h = request.responseText; //獲得返回的響應(yīng)數(shù)據(jù)，該數(shù)據(jù)位上傳進(jìn)度百分比
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
document.getElementById("progressPercent").style.display=""; //顯示百分比 
progressPercent.innerHTML=h+"%"; //顯示完成的百分比
document.getElementById("progressBar").style.display="block"; //顯示進(jìn)度條
document.getElementById("imgProgress").width=h*(235/100); //顯示完成的進(jìn)度
}
}
}

（5）編寫showProgress.jsp頁面，在該頁中應(yīng)用EL表達(dá)式輸出保存在session域中的上傳進(jìn)度條的值，具體代碼如下：

<%@page contentType="text/html" pageEncoding="GBK"%>
${progressBar}

（6）編寫表單提交按鈕onclick事件所調(diào)用的JavaScript方法，在該方法通過window對象的setInterval()方法每隔一定時間請求一次服務(wù)器，獲得最新的上傳進(jìn)度，關(guān)鍵代碼如下：

function deal(form){
form.submit(); //提交表單
timer=window.setInterval("getProgress()",500); //每隔500毫秒獲取一次上傳進(jìn)度
}

關(guān)于Ajax中怎么實現(xiàn)文件上傳帶進(jìn)度條就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。