歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

如何在網(wǎng)頁中實現(xiàn)帶進(jìn)度條的文件上傳

發(fā)布時間：2016-07-02 01:03  回復(fù):0  查看:3608   最后回復(fù)：2016-07-02 01:03  
在 ajax入門http://www.maiziedu.com/course/351/知識學(xué)習(xí)中，通過 ajax 技術(shù)實現(xiàn)帶進(jìn)度條的文件上傳是必須的知識點(diǎn)之一，本文就將和大家分享這部分內(nèi)容，一起來看看吧。
1. 概述
      在實際的 Web 應(yīng)該開發(fā)或網(wǎng)站開發(fā)過程中，經(jīng)常需要實現(xiàn)文件上傳的功能。在文件上傳過程中，經(jīng)常需要用戶進(jìn)行長時間的等待，為了讓用戶及時了解上傳進(jìn)度，可以在上傳文件的同時，顯示文件的上傳進(jìn)度條。本實例將利用 Ajax來實現(xiàn) : 訪問文件上傳頁面，單擊“瀏覽”按鈕選擇要上傳的文件，注意文件不能超過 50MB ，否則系統(tǒng)將給出錯誤提示。選擇完要上傳的文件后，單擊“提交”按鈕，將會上傳文件并顯示上傳進(jìn)度。
2. 技術(shù)要點(diǎn)
     主要是應(yīng)用開源的 Common-FileUpload 組件來實現(xiàn)分段文件上傳，從而實現(xiàn)在上傳過程中，不斷獲取上傳進(jìn)度。下面對 Common-FileUpload 組件進(jìn)行詳細(xì)介紹。
     Common-FileUpload 組件時 Apache 組織下的 jakarta-commons 項目下的一個子項目，該組件可以方便地將 multipart/form-data 類型請求中的各種表單域解析出來。該組件需要另一個名為 Common-IO 的組件的支持。這兩個組件包文件可以到 http://commons.apache.org 網(wǎng)站上進(jì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)度條的
標(biāo)簽和顯示百分比的 標(biāo)簽，關(guān)鍵代碼如下：
     請選擇上傳的文件：
       注：文件大小請控制在 50M 以內(nèi)。
     
             如何在網(wǎng)頁中實現(xiàn)帶進(jìn)度條的文件上傳
      0%
     
         
（ 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)鍵代碼如下：
（ 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)度
}
原文來自： 柯南& 的博客
您還未登錄，請先登錄

熱門帖子

最新帖子

?