1.概述
在實(shí)際的Web應(yīng)該開(kāi)發(fā)或網(wǎng)站開(kāi)發(fā)過(guò)程中，經(jīng)常需要實(shí)現(xiàn)文件上傳的功能。在文件上傳過(guò)程中，經(jīng)常需要用戶進(jìn)行長(zhǎng)時(shí)間的等待，為了讓用戶及時(shí)了解上傳進(jìn)度，可以在上傳文件的同時(shí)，顯示文件的上傳進(jìn)度條。運(yùn)行本實(shí)例，如圖1所示，訪問(wèn)文件上傳頁(yè)面，單擊“瀏覽”按鈕選擇要上傳的文件，注意文件不能超過(guò)50MB，否則系統(tǒng)將給出錯(cuò)誤提示。選擇完要上傳的文件后，單擊“提交”按鈕，將會(huì)上傳文件并顯示上傳進(jìn)度。
2.技術(shù)要點(diǎn)
主要是應(yīng)用開(kāi)源的Common-FileUpload組件來(lái)實(shí)現(xiàn)分段文件上傳，從而實(shí)現(xiàn)在上傳過(guò)程中，不斷獲取上傳進(jìn)度。下面對(duì)Common-FileUpload組件進(jìn)行詳細(xì)介紹。
Common-FileUpload組件時(shí)Apache組織下的jakarta-commons項(xiàng)目下的一個(gè)子項(xiàng)目，該組件可以方便地將multipart/form-data類型請(qǐng)求中的各種表單域解析出來(lái)。該組件需要另一個(gè)名為Common-IO的組件的支持。這兩個(gè)組件包文件可以到http://commons.apache.org網(wǎng)站上進(jìn)行下載。
（1）創(chuàng)建上傳對(duì)象
在應(yīng)該Common-FileUpload組件實(shí)現(xiàn)文件上傳時(shí)，需要?jiǎng)?chuàng)建一個(gè)工廠對(duì)象，并根據(jù)該工廠對(duì)象創(chuàng)建一個(gè)新的文件上傳對(duì)象，具體代碼如下：
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
（2）解析上傳請(qǐng)求
創(chuàng)建一個(gè)文件上傳對(duì)象后，就可以應(yīng)用該對(duì)象來(lái)解析上傳請(qǐng)求，獲取全部的表單項(xiàng)，可以通過(guò)文件上傳對(duì)象的parseRequest()方法來(lái)實(shí)現(xiàn)。parseRequest()方法的語(yǔ)法結(jié)構(gòu)如下：
public List parseRequest(HttpServletRequest request) throws FileUploadException
（3）FileItem類
在Common-FileUpload組件中，無(wú)論是文件域還是普通表單域，都當(dāng)成FileItem對(duì)象來(lái)處理。如果該對(duì)象的isFormField()方法返回值為true，則表示是一個(gè)普通表單域，否則為一個(gè)文件域。在實(shí)現(xiàn)文件上傳時(shí)，可以通過(guò)FileItem類的getName()方法獲得上傳文件的文件名，通過(guò)getSize()方法獲得上傳文件的大小。
3.具體實(shí)現(xiàn)
（1）創(chuàng)建request.js文件，在該文件中編寫Ajax請(qǐng)求方法。
（2）新建文件上傳頁(yè)index.jsp，在該頁(yè)中添加用于獲得上傳文件信息的表單以及表單元素，并添加用于顯示進(jìn)度條的div>標(biāo)簽和顯示百分比的span>標(biāo)簽，關(guān)鍵代碼如下：
form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">
請(qǐng)選擇上傳的文件：input name="file" type="file" size="34">
注：文件大小請(qǐng)控制在50M以內(nèi)。
div id="progressBar" class="prog_border" align="left">
img src="images/progressBar.gif" width="0" height="13" id="imgProgress">/div>
span id="progressPercent" style="width:40px;display:none">0%/span>
input name="Submit" type="button" value="提交" onClick="deal(this.form)">
input name="Reset" type="reset" class="btn_grey" value="重置">/td>
/form>
（3）新建上傳文件的Servlet實(shí)現(xiàn)類UpLpad。在該類中編寫實(shí)現(xiàn)文件上傳的方法uploadFile()，在該方法中通過(guò)Common-FileUpload組件實(shí)現(xiàn)分段上傳文件，并計(jì)算上傳百分比，實(shí)時(shí)保存到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; //單個(gè)上傳文件大小的上限
DiskFileItemFactory factory = new DiskFileItemFactory(); //創(chuàng)建工廠對(duì)象
ServletFileUpload upload = new ServletFileUpload(factory); //創(chuàng)建一個(gè)新的文件上傳對(duì)象
try {
List items = upload.parseRequest(request); // 解析上傳請(qǐng)求
Iterator itr = items.iterator(); // 枚舉方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //獲取FileItem對(duì)象
if (!item.isFormField()) { // 判斷是否為文件域
if (item.getName() != null !item.getName().equals("")) {//是否選擇了文件
long upFileSize=item.getSize(); //上傳文件的大小
String fileName=item.getName(); //獲取文件名
if(upFileSize>maxSize){
error="您上傳的文件太大，請(qǐng)選擇不超過(guò)50M的文件";
break;
}
// 此時(shí)文件暫存在服務(wù)器的內(nèi)存中
File tempFile = new File(fileName); //構(gòu)造文件目錄臨時(shí)對(duì)象
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; //計(jì)算上傳文件的百分比
fos.write(b,0,length); //向文件輸出流寫讀取的數(shù)據(jù)
session.setAttribute("progressBar",Math.round(percent));
}
fos.close();
Thread.sleep(1000); //線程休眠1秒
} else {
error="沒(méi)有選擇上傳文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "上傳文件出現(xiàn)錯(cuò)誤：" + 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）在文件上傳頁(yè)index.jsp中，導(dǎo)入編寫的Ajax請(qǐng)求方法的request.js文件，并編寫獲取上傳進(jìn)度的Ajax請(qǐng)求方法和Ajax回調(diào)函數(shù)，關(guān)鍵代碼如下：
script language="javascript" src="js/request.js">/script>
script language="javascript">
var request = false;
function getProgress(){
var url="showProgress.jsp"; //服務(wù)器地址
var param ="nocache="+new Date().getTime(); //每次請(qǐng)求URL參數(shù)都不同 ，避免上傳時(shí)進(jìn)度條不動(dòng)
request=httpRequest("post",url,true,callbackFunc,param); //調(diào)用請(qǐng)求方法
}
//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)度
}
}
}
/script>
（5）編寫showProgress.jsp頁(yè)面，在該頁(yè)中應(yīng)用EL表達(dá)式輸出保存在session域中的上傳進(jìn)度條的值，具體代碼如下：
%@page contentType="text/html" pageEncoding="GBK"%>
${progressBar}
（6）編寫表單提交按鈕onclick事件所調(diào)用的JavaScript方法，在該方法通過(guò)window對(duì)象的setInterval()方法每隔一定時(shí)間請(qǐng)求一次服務(wù)器，獲得最新的上傳進(jìn)度，關(guān)鍵代碼如下：
function deal(form){
form.submit(); //提交表單
timer=window.setInterval("getProgress()",500); //每隔500毫秒獲取一次上傳進(jìn)度
}
以上所述是小編給大家介紹的基于Ajax技術(shù)實(shí)現(xiàn)文件上傳帶進(jìn)度條的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- jQuery監(jiān)聽(tīng)文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- 基于fileUpload文件上傳帶進(jìn)度條效果的實(shí)例(必看)
