HTML5 + AJAX ( jQuery版本 ) 文件上傳帶進度條

頁面技術：HTML5 + AJAX ( jQuery)

後臺技術：Servlet 3.0

服務器：Tomcat 7.0

jQuery版本：1.9.1

---

Servlet 3.0 代碼

package org.ajaxfileupload.servlet;

import java.io.File;
import java.io.IOException;
import java.util.Collection;
import java.util.Iterator;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

@WebServlet(description = "文件上傳", urlPatterns = { "/upload" })

/** 
 * 
 *     基於 HTML5 + Servlet 3.0 + AJAX
 * 
 *     maxFileSize:            最大上傳文件大小,測試後認爲應該是字節爲單位
 *     fileSizeThreshold    :    當數據量大於該值時，內容將被寫入文件。（specification中的解釋的大概意思，不知道是否是指Buffer size），大小也是已字節單位
                            maxRequestSize = 8*1024*1024*6 //針對該 multipart/form-data 請求的最大數量，默認值爲-1，表示沒有限制。以字節爲單位。
 */
@MultipartConfig( maxFileSize = 1024 *1024 *100 , fileSizeThreshold = 819200    )
public class FileUploadServlet extends HttpServlet {
    
    private static final long serialVersionUID = 1L;
    
    private String fileNameExtractorRegex = "filename=\".+\"";

    public FileUploadServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        String savePath = request.getServletContext().getRealPath("/upload");

        Collection<Part> parts = request.getParts();
        
        // 遍歷全部的表單內容，將表單中的文件寫入上傳文件目錄
        for (Iterator<Part> iterator = parts.iterator(); iterator.hasNext();) {
        
            Part part = iterator.next();
            
            // 從Part的content-disposition中提取上傳文件的文件名
            String fileName = getFileName(part);
            
            if (fileName != null) {
                part.write(    savePath + File.separator + fileName);
            }
        }
        response.getWriter().write("true");
        response.getWriter().close();
    }

    /**
     * 從Part的Header信息中提取上傳文件的文件名
     * 
     * @param part
     * @return 上傳文件的文件名，若是若是沒有則返回null
     */
    private String getFileName(Part part) {
        
        String fileName = null;

        // 獲取header信息中的content-disposition，若是爲文件，則能夠從其中提取出文件名
        String cotentDesc = part.getHeader("content-disposition");
        Pattern pattern = Pattern.compile(fileNameExtractorRegex);
        
        Matcher matcher = pattern.matcher(cotentDesc);
        
        if (matcher.find()) {
            fileName = matcher.group();
            fileName = fileName.substring(10, fileName.length() - 1);
        }
        return fileName;
    }
}

---

前臺

 

首先HTML5用AJAX提交數據先要學習一個HTML5新增長的對象：FormData 

FormData 對象可使用append 方法進行 key - value的數據添加，與之前咱們經常使用的json不一樣的就是能夠異步上傳二進制文件。

一、FormDate對象的建立

var formData = new FormData();

二、向 FormDate 對象添加數據

formData.append("catname", "我是一隻喵"); formData.append("age", 1); 　　　　　　　　// 數字類型會轉爲字符串類型
 
// 能夠增長上傳的二進制文件，好比fileInputElement對象中已經包含了用戶所選擇的文件
formData.append("userfile", fileInputElement.files[0]); 
//也能夠將一個 Blob 對象添加到 formData 中 var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
var oBlob = new Blob([oFileBody], { type: "text/xml"}); formData.append("webmasterfile", oBlob);

三、使用 FormData 對象

var xhr = new XMLHttpRequest(); xhr.open("POST", "upload"); xhr.send(formData);

 

---

HTML部分

FormData 對象簡單的介紹完畢後，咱們來看看頁面的HTML代碼是怎麼寫的

<img  width="400" height="250"/><br />  
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />  
<div id="parent">
    <div id="son"></div>
</div>

最下面的div是用來顯示進度條的，因此須要對應的css樣式。樣式以下，顏色很差看，本身改吧：

<style type="text/css">  
    #parent{width:550px; height:10px; border:2px solid #09F;}  
    #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}  
</style>

 

---

 

JS部分

重頭戲來了，在頁面上加載上jquery後咱們來看 JavaScript 是怎麼寫的，首先是 file 組件的 onchange事件方法：

function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) ); }

showPic的第一行是從 file 對象獲得上傳文件 。 第二行則爲 img 設置了src屬性。 能夠在頁面中獲得即時預覽的效果。

在看 uploadFile 方法以前，再讓咱們簡單學習一下進度事件 （Progress Events ）的progress 吧 ......  

Progress Events規範是W3C的一個工做草案，定義了與客戶端服務器通訊有關的事件。這些事件最先其實值針對XHR操做，但目前也被其它API借鑑。有如下6個進度事件。

• loadstart：在接收到相應數據的第一個字節時觸發。
• progress：在接收相應期間持續不斷觸發。　　//咱們就只看着一個好了
• error：在請求發生錯誤時觸發。
• abort：在由於調用abort()方法而終止連接時觸發。
• load：在接收到完整的相應數據時觸發。
• loadend：在通訊完成或者觸發error、abort或load事件後觸發。

 

progress事件是Mozilla提交的，這個事件會在瀏覽器接收新數據期間週期性地觸發。而onprogress事件處理程序會接收到一個event對象，其target屬性是XHR對象，但包含着三個額外的屬性：

lengthComputable ：表示進度信息是否可用的布爾值

position　：表示已經接收的字節數

totalSize ：表示根據Content-Length相應頭部肯定的預期字節數。

有了這些信息，咱們就能夠爲用戶建立一個進度指示器了。可是 問題又來了， jQuery的 ajax 方法沒有關於 progress 事件的操做。這怎麼玩~~

好在經過查閱資料發現，jQuery的ajax方法調用的XMLHttpRequest對象是能夠指定的！！！

看 8453行，就是它了。因而 uploadFile 方法的ajax部分的時候代碼就變成了這個樣式。

最重要的部分代碼：

function uploadFile(){ 　　
　　// 獲取上傳文件，放到 formData對象裏面
　　var pic = $("#pic").get(0).files[0];
　　var formData = new FormData(); formData.append("file" , pic); 
　　$.ajax({ 　　　　type: "POST", 　　　　url: "upload", 　　　　data: formData ,　　//這裏上傳的數據使用了formData 對象 　　　　processData : false, 　　　　//必須false纔會自動加上正確的Content-Type 
　　　　contentType : false , 
　　　　
　　　　//這裏咱們先拿到jQuery產生的 XMLHttpRequest對象，爲其增長 progress 事件綁定，而後再返回交給ajax使用
　　　　xhr: function(){ 　　　　　　var xhr = $.ajaxSettings.xhr(); 　　　　　　if(onprogress && xhr.upload) { 　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false); 　　　　　　　　return xhr; 　　　　　　}
　　　　} 　　}); }

最後加上 onprogress 方法，爲整個功能花上個句號。

/** * 偵查附件上傳狀況 ,這個方法大概0.05-0.1秒執行一次  */
function onprogress(evt){ 　　var loaded = evt.loaded;                  //已經上傳大小狀況 
   var tot = evt.total;                      //附件總大小 
   var per = Math.floor(100*loaded/tot);     //已經上傳的百分比  
　　$("#son").html( per +"%" ); $("#son").css("width" , per +"%");
}

 

最後附上整個頁面的代碼，方便對比。

<!DOCTYPE html>
<html>
  <head>
    <title>html5_2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css"> #parent{width:550px; height:10px; border:2px solid #09F;} #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}  
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) ); uploadFile(); } function uploadFile(){ var pic = $("#pic").get(0).files[0]; var formData = new FormData(); formData.append("file" , pic); /** * 必須false纔會避開jQuery對 formdata 的默認處理 * XMLHttpRequest會對 formdata 進行正確的處理 */ $.ajax({ type: "POST", url: "upload", data: formData , processData : false, //必須false纔會自動加上正確的Content-Type 
 contentType : false , xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); } /** * 偵查附件上傳狀況 ,這個方法大概0.05-0.1秒執行一次 */
    function onprogress(evt){ var loaded = evt.loaded; //已經上傳大小狀況 
        var tot = evt.total; //附件總大小 
        var per = Math.floor(100*loaded/tot); //已經上傳的百分比 
 $("#son").html( per +"%" ); $("#son").css("width" , per +"%"); } </script>
  </head>
  
  <body>
    
    <img width="400" height="250"/><br />  
    <input type="file" id="pic" name="pic" onchange="showPic()"/>
    <input type="button" value="上傳圖片" onclick="uploadFile()" /><br />  
    <div id="parent">
        <div id="son"></div>
    </div> 
  </body>
</html>