天天看點
傳回

（強烈推薦）基于SSM和BootStrap的共享雲盤系統設計（項目實作：線上預覽檔案）

知識點：JavaScript、jQuery、SSM、IO、Ajax、layUI，JS插件使用

重 點：前背景資料互動，檔案讀取，資料庫查詢，插件的使用等

難 點：JS插件使用

内 容：登入成功後，可線上預覽圖檔、txt、Office文檔、音視訊等

（強烈推薦）基于SSM和BootStrap的共享雲盤系統設計（項目實作：線上預覽檔案）

圖1 線上預覽文檔

（強烈推薦）基于SSM和BootStrap的共享雲盤系統設計（項目實作：線上預覽檔案）

圖2 線上多媒體播放功能

1. 線預覽或播放

所有的線上預覽或播放，均需調用index.js中的openFile()方法，根據傳入的值判斷是圖檔、文檔、音頻、視訊等類型，代碼如下所示；

/**分類型打開檔案*/
function openFile(obj) {
    var fileType = $(obj).attr("filetype");
    var fileName = $(obj).text();
    var parentPath = $(obj).attr("currentPath") == null ? currentPath : $(obj).attr("currentPath");
    var url = encodeURI('currentPath='+parentPath+'&fileType='+fileType+ '&fileName='+fileName);
    if (fileType == "folder-open") {
        var prePath = $(obj).attr("prePath");
        var path = prePath + "\\" + fileName;
        getFiles(path);
        navPath(path, fileName);
    } else if(fileType.indexOf("image") >= 0){
        $(obj).attr({"href":"file/openFile.action?"+url,"data-lightbox":"test","data-title":fileName});
        return true;
    } else if(fileType.indexOf("office") >= 0){
        $.post("file/openOffice.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            if(data.success){
                openOffice(data.data);
            }else{
                layer.msg(data.msg);
            }
        });
    } else if(fileType.indexOf("audio") >= 0){
        layer.open({
            type:2,
            title:'播放',
            content:'file/openAudioPage.action?' + url,
            shade: [0],
            area: ['440px', '120px'],
            offset: 'rb', /右下角彈出
        });
    } else if(fileType.indexOf("docum") >= 0){
        $.post("file/openFile.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            layer.open({
                type: 1,
                area: ['720px', '570px'],
                title:false,
                scrollbar: false,
                content: '<textarea rows="50" cols="150">'+data+'</textarea>'
            });
        });
    } else if(fileType.indexOf("vido") >= 0){
        layer.open({
            type: 1,
            area: ['480px', '400px'],
            title:false,
            content: '<div id="a1"></div>'
        });
        var flashvars={
                f:'file/openFile.action?' + url,
                c:0,
                p:1,
                b:1
            };
        var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
        CKobject.embedSWF('js/ckplayer/ckplayer.swf','a1','ckplayer_a1','480','400',flashvars,params);
        return false;
    }
    return false;
}

複制

2. 線上預覽圖檔和txt文檔

1）點選圖檔、圖檔的檔案名或txt文檔名時，通過JS或Ajax向後端發出file/openFile.action請求，請求參數是由之前後端的傳回資料拼接而成。部分核心代碼如下所示；

$.each(data.data, function() {
    $("#"+ typeName).append('<a href="file/openFile.action?'+url+'" data-lightbox="roadtrip" title="'+this.fileName+'"><img alt="'+this.fileName+'" style="margin: 10px" src="file/openFile.action?'+url+'" width="150" height="150"></a>');
});

複制

2）另外，此處還引入了lightbox插件，否則每次請求action後直接打開的是圖檔，而不是在目前頁面上再彈出一個圖檔或文本顯示框。在index.jsp的<head>标簽中引入lightbox插件，代碼如下所示；

<link href="${pageContext.request.contextPath }/css/lightbox.css" rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/lightbox.js"></script>

複制

3）在FileController類中添加openFile()方法，用于接受和處理線上圖檔/txt預覽功能，代碼如下所示；

/**
 * 打開檔案
 * 
 * @param response
 *            響應檔案流
 * @param currentPath
 *            目前路徑
 * @param fileName
 *            檔案名
 * @param fileType
 *            檔案類型
 */
@RequestMapping("/openFile")
public void openFile(HttpServletResponse response, String currentPath,String fileName, String fileType) {
    try {
        fileService.respFile(response, request, currentPath, fileName, fileType);
    }catch (IOException e) {
        e.printStackTrace();
    }
}

複制

4）在FileService類中添加respFile()方法，通過Apache的IOUtils.copy()方法對目前圖檔/txt檔案進行讀寫。前端将為txt文檔傳入對應的“docum”辨別；當type變量為“docum”的時，則需要再做一次編碼裝換，以防止文本亂碼，代碼如下所示；

public void respFile(HttpServletResponse response, HttpServletRequest request, String currentPath, String fileName,String type) throws IOException {
    File file = new File(getFileName(request, currentPath), fileName);
    InputStream inputStream = new FileInputStream(file);
    if ("docum".equals(type)) {
        response.setCharacterEncoding("UTF-8");
        IOUtils.copy(inputStream, response.getWriter(), "UTF-8");
    } else {
        IOUtils.copy(inputStream, response.getOutputStream());
    }
}

複制

3. Office文檔線上預覽或播放

所有的線上預覽或播放，均需調用index.js中的openFile()方法，根據傳入的值判斷是圖檔、文檔、音頻、視訊等類型，代碼如下所示；

function openFile(obj) {
    var fileType = $(obj).attr("filetype");
    var fileName = $(obj).text();
    var parentPath = $(obj).attr("currentPath") == null ? currentPath : $(obj).attr("currentPath");
    var url = encodeURI('currentPath='+parentPath+'&fileType='+fileType+ '&fileName='+fileName);
    if (fileType == "folder-open") {
        var prePath = $(obj).attr("prePath");
        var path = prePath + "\\" + fileName;
        getFiles(path);
        navPath(path, fileName);
    } else if(fileType.indexOf("image") >= 0){
        $(obj).attr({"href":"file/openFile.action?"+url,"data-lightbox":"test","data-title":fileName});
        return true;
    } else if(fileType.indexOf("office") >= 0){
        $.post("file/openOffice.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            if(data.success){
                openOffice(data.data);
            }else{
                layer.msg(data.msg);
            }
        });
    } else if(fileType.indexOf("audio") >= 0){
        layer.open({
            type:2,
            title:'播放',
            content:'file/openAudioPage.action?' + url,
            shade: [0],
            area: ['440px', '120px'],
            offset: 'rb', /右下角彈出
        });
    } else if(fileType.indexOf("docum") >= 0){
        $.post("file/openFile.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            layer.open({
                type: 1,
                area: ['720px', '570px'],
                title:false,
                scrollbar: false,
                content: '<textarea rows="50" cols="150">'+data+'</textarea>'
            });
        });
    } else if(fileType.indexOf("vido") >= 0){
        layer.open({
            type: 1,
            area: ['480px', '400px'],
            title:false,
            content: '<div id="a1"></div>'
        });
        var flashvars={
            f:'file/openFile.action?' + url,
            c:0,
            p:1,
            b:1
        };
        var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
        CKobject.embedSWF('js/ckplayer/ckplayer.swf','a1','ckplayer_a1','480','400',flashvars,params);
        return false;
    }
    return false;
}

複制

4. 線上預覽office文檔

1）當點選的類型是office類型時，将以post方式向服務端file/openOffice.action送出請求；在FileController類中增加openOffice()方法，完成前端所發出的請求，代碼如下所示；

/**
 * 打開文檔
 * 
 * @param currentPath
 *            當面路徑
 * @param fileName
 *            檔案名
 * @param fileType
 *            檔案類型
 * @return Json對象（檔案Id）
 */
@RequestMapping("/openOffice")
public @ResponseBody Result<String> openOffice(String currentPath,
    String fileName, String fileType) {
    try {
        String openOffice = fileService.openOffice(request, currentPath,fileName);
        if (openOffice != null) {
            Result<String> result = new Result<>(505, true, "打開成功");
            result.setData(openOffice);
            return result;
        }
        return new Result<>(501, false, "打開失敗");
    } catch (Exception e) {
        e.printStackTrace();
        return new Result<>(501, false, "打開失敗");
    }
}

複制

2）在FileService類中添加openOffice()方法，通過FileUtils中的MD5()方法，将傳入的檔案名處理為資料庫中所對應的officeMD5，代碼如下所示；

/**
 * 打開文檔檔案
 * 
 * @param request
 * @param currentPath
 * @param fileName
 * @return
 * @throws Exception
 */
public String openOffice(HttpServletRequest request, String currentPath, String fileName) throws Exception {
    return officeDao.getOfficeId(FileUtils.MD5(new File(getFileName(request, currentPath), fileName)));
}

複制

其中，FileUtile類中提供MD5()方法，代碼如下所示；

public static String MD5(File file){
    byte[] bys = null;
    try {
        bys = org.apache.commons.io.FileUtils.readFileToByteArray(file);
        return DigestUtils.md5DigestAsHex(bys).toUpperCase();
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

複制

3）在OfficeDao.xml檔案中添加SQL語句，用于根據id查詢檔案ID資訊，代碼如下所示；

<select id="getOfficeId" parameterType="java.lang.String" resultType="java.lang.String">
    select officeid from office where officeMd5 = #{officeMd5}
</select>

複制

4）從背景擷取雲文檔的id成功後，再調用index.js中的openOffice()方法，通過雲的文檔API接口，打開傳入id所對應的office文檔。部分核心代碼如下所示；

function openOffice(id){
    layer.open({
        type: 1,
        zIndex : 80,
        area: ['auto','600px'],
        offset: '10px',
        title:false,
        content: '<div id="officeContent"></div>'
    });
    var option = {
        docId: id,
        token: 'TOKEN',
        host: 'BCEDOC',
        serverHost: 'http://doc.bj.baidubce.com',
        width: 600, /文檔容器寬度
        ready: function (handler) {  / 設定字型大小和顔色, 背景顔色                   handler.setFontSize(1);
            handler.setBackgroundColor('#000');
            handler.setFontColor('#fff');
        },
        flip: function (data) {    / 翻頁時回調函數, 可供客戶進行統計等
            console.log(data.pn);
        },
        fontSize:'big',
        toolbarConf: {
            zoom: false,
            page: false, /上下翻頁箭頭圖示
            pagenum: false, /幾分之幾頁
            full: false, /是否顯示全屏圖示,點選後全屏
            copy: true, /是否可以複制文檔内容
            position: 'center',/ 設定 toolbar中翻頁和放大圖示的位置
        } /文檔頂部工具條配置對象,必選
    };
    new Document('officeContent', option);
}

複制

5. 音視訊線預覽或播放

所有的線上預覽或播放，均需調用index.js中的openFile()方法，根據傳入的值判斷是圖檔、文檔、音頻、視訊等類型，代碼如下所示；

function openFile(obj) {
    var fileType = $(obj).attr("filetype");
    var fileName = $(obj).text();
    var parentPath = $(obj).attr("currentPath") == null ? currentPath : $(obj).attr("currentPath");
    var url = encodeURI('currentPath='+parentPath+'&fileType='+fileType+ '&fileName='+fileName);
    if (fileType == "folder-open") {
        var prePath = $(obj).attr("prePath");
        var path = prePath + "\\" + fileName;
        getFiles(path);
        navPath(path, fileName);
    } else if(fileType.indexOf("image") >= 0){
        $(obj).attr({"href":"file/openFile.action?"+url,"data-lightbox":"test","data-title":fileName});
        return true;
    } else if(fileType.indexOf("office") >= 0){
        $.post("file/openOffice.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            if(data.success){
                openOffice(data.data);
            }else{
                layer.msg(data.msg);
            }
        });
    } else if(fileType.indexOf("audio") >= 0){
        layer.open({
            type:2,
            title:'播放',
            content:'file/openAudioPage.action?' + url,
            shade: [0],
            area: ['440px', '120px'],
            offset: 'rb', /右下角彈出
        });
    } else if(fileType.indexOf("docum") >= 0){
        $.post("file/openFile.action", {
            "currentPath" : parentPath,
            "fileType" : fileType,
            "fileName" : fileName,
        }, function(data){
            layer.open({
                type: 1,
                area: ['720px', '570px'],
                title:false,
                scrollbar: false,
                content: '<textarea rows="50" cols="150">'+data+'</textarea>'
            });
        });
    } else if(fileType.indexOf("vido") >= 0){
        layer.open({
            type: 1,
            area: ['480px', '400px'],
            title:false,
            content: '<div id="a1"></div>'
        });
        var flashvars={
            f:'file/openFile.action?' + url,
            c:0,
            p:1,
            b:1
        };
        var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
        CKobject.embedSWF('js/ckplayer/ckplayer.swf','a1','ckplayer_a1','480','400',flashvars,params);
        return false;
    }
    return false;
}

複制

6. 線上播放視訊

線上播放視訊部分步驟類似于線上圖檔預覽，但需借助ckplayer插件和flash播放器（需額外安裝）。

1）在index.js中引入ckplayer插件，代碼如下所示；

<script src="${pageContext.request.contextPath }/js/ckplayer/ckplayer.js"> </script>

複制

2）前台index.js中請求file/openFile.action，代碼背景同線上圖檔預覽，此處省略代碼。

3）前後擷取到背景傳回的視訊位址後，則借助ckplayer播放目前視訊，代碼如下所示；

var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always', wmode:'transparent'};  CKobject.embedSWF('js/ckplayer/ckplayer.swf','a1','ckplayer_a1','480','400',flashvars,params);

複制

7. 線上播放音頻

本系統線上播放音頻無需播放插件，使用layUI彈出層播放即可。

1）确定是audio類型後，直接使用layer.open()方法彈出視窗，并打開file/openAudioPage.action傳回的位址（index.js代碼已在第1步給出）；

2）在FileController類中添加openAudioPage()方法，将路徑和檔案名傳入model，再傳回給前台打開，即播放音樂。代碼如下所示。

@RequestMapping("/openAudioPage")
public String openAudioPage(Model model, String currentPath, String fileName) {
    model.addAttribute("currentPath", currentPath);
    model.addAttribute("fileName", fileName);
    return "audio";
}

複制

上一篇: for循環10000次花多長時間_别再說Python慢(循環篇)
下一篇: python中的指派，淺拷貝，深拷貝