您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Ajax中怎么實現(xiàn)文件上傳帶進(jìn)度條,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
(1)創(chuàng)建上傳對象
在應(yīng)該Common-FileUpload組件實現(xiàn)文件上傳時,需要創(chuàng)建一個工廠對象,并根據(jù)該工廠對象創(chuàng)建一個新的文件上傳對象,具體代碼如下:
DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory);
(2)解析上傳請求
創(chuàng)建一個文件上傳對象后,就可以應(yīng)用該對象來解析上傳請求,獲取全部的表單項,可以通過文件上傳對象的parseRequest()方法來實現(xiàn)。parseRequest()方法的語法結(jié)構(gòu)如下:
public List parseRequest(HttpServletRequest request) throws FileUploadException
(3)FileItem類
在Common-FileUpload組件中,無論是文件域還是普通表單域,都當(dāng)成FileItem對象來處理。如果該對象的isFormField()方法返回值為true,則表示是一個普通表單域,否則為一個文件域。在實現(xiàn)文件上傳時,可以通過FileItem類的getName()方法獲得上傳文件的文件名,通過getSize()方法獲得上傳文件的大小。
3.具體實現(xiàn)
(1)創(chuàng)建request.js文件,在該文件中編寫Ajax請求方法。
(2)新建文件上傳頁index.jsp,在該頁中添加用于獲得上傳文件信息的表單以及表單元素,并添加用于顯示進(jìn)度條的<div>標(biāo)簽和顯示百分比的<span>標(biāo)簽,關(guān)鍵代碼如下:
<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">
請選擇上傳的文件:<input name="file" type="file" size="34">
注:文件大小請控制在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" >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實現(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)鍵代碼如下:
<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(); //每次請求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)度 } } } </script>
(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é)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。