前言

圖片、音訊、視訊等資原始檔，我在之前的專案中都是採用，直接放到webContent路徑下，然後在頁面直接訪問。這樣就會存在一個安全性問題，就是無論什麼使用者或者遊客，只要知道檔案的URL就可以通過在瀏覽器位址列輸入URL直接獲取到。
最近在瀏覽網站的時候，無意間接觸到了Blob物件，經過研究終於可以實現從伺服器其他路徑（不在webContent路徑下）獲取檔案，並進行顯示或播放的功能了。其原理是，首先通過ajax請求，獲取blob物件，在這個過程中就可以進行訪問限制（例如，訪問時檢測使用者是否登入等）。然後通過js獲取blob物件的路徑，然後賦給標籤。

後臺程式碼

後臺程式碼和下載檔案的程式碼是一樣的，示例如下：

/*
 * 在這裡可以進行許可權驗證等操作
 */

//建立檔案物件
File f = new File("E:\\test.mp4");
//獲取檔名稱
String fileName = f.getName();
//匯出檔案
String agent = getRequest().getHeader("User-Agent").toUpperCase();
InputStream fis = null;
OutputStream os = null;
try {
    fis = new BufferedInputStream(new FileInputStream(f.getPath()));
    byte
 
[] buffer;
    buffer = new byte[fis.available()];
    fis.read(buffer);
    getResponse().reset();
    //由於火狐和其他瀏覽器顯示名稱的方式不相同，需要進行不同的編碼處理
    if(agent.indexOf("FIREFOX") != -1){//火狐瀏覽器
        getResponse().addHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("GB2312"),"ISO-8859-1"
 
));
    }else{//其他瀏覽器
        getResponse().addHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8")); 
    }
    //設定response編碼 
    getResponse().setCharacterEncoding("UTF-8");
    getResponse().addHeader("Content-Length", "" + f.length());
    //設定輸出檔案型別
    getResponse().setContentType("video/mpeg4");
    //獲取response輸出流
    os = getResponse().getOutputStream();
    // 輸出檔案
    os.write(buffer);
}catch(Exception e){
    System.out.println(e.getMessage());
} finally{
    //關閉流
    try {
        if(fis != null){
            fis.close();
        }
    } catch (IOException e) {
        System.out.println(e.getMessage());
    } finally{
        try {
            if(os != null){
                os.flush();
            }
        } catch (IOException e) {
            System.out.println(e.getMessage());
        } finally{
            try {
                if(os != null){
                    os.close();
                }
            } catch (IOException e) {
                System.out.println(e.getMessage());
            }
        }
    }
}

前端程式碼

Javascript程式碼：

//建立XMLHttpRequest物件
var xhr = new XMLHttpRequest();
//配置請求方式、請求地址以及是否同步
xhr.open('POST', './play', true);
//設定請求結果型別為blob
xhr.responseType = 'blob';
//請求成功回撥函式
xhr.onload = function(e) {
    if (this.status == 200) {//請求成功
        //獲取blob物件
        var blob = this.response;
        //獲取blob物件地址，並把值賦給容器
        $("#sound").attr("src", URL.createObjectURL(blob));
    }
};
xhr.send();

HTML程式碼：

<video id="sound" width="200" controls="controls"></video>