当前位置: 开发笔记 > 编程语言 > 正文

（强烈推荐）基于SSM和BootStrap的共享云盘系统设计（项目实现：在线预览文件）

作者：陈氏女子2602926065 | 来源：互联网 | 2023-09-16 13:22

知识点：JavaScript、jQuery、SSM、IO、Ajax、layUI，JS插件使用重点：前后台数据交互，文件读取，数据库查询，插件的使用等难点：JS插件使用内容：登录成功

知识点：Javascript、jQuery、SSM、IO、Ajax、layUI，JS插件使用

重点：前后台数据交互，文件读取，数据库查询，插件的使用等

难点：JS插件使用

内容：登录成功后，可在线预览图片、txt、Office文档、音视频等

图1 在线预览文档

图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: ''+data+''});});} else if(fileType.indexOf("vido") >= 0){layer.open({type: 1,area: ['480px', '400px'],title:false,content: '

'});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(''); });

2）另外，此处还引入了lightbox插件，否则每次请求action后直接打开的是图片，而不是在当前页面上再弹出一个图片或文本显示框。在index.jsp的标签中引入lightbox插件，代码如下所示；

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()方法，根据传入的值判断是图片、文档、音频、视频等类型，代码如下所示；

'});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文档

本系统中的office文档借助了百度云进行存储和预览，每上传一个office文档都会在office数据表中生成一条记录，即：文档id对应了百度云中的文档id，打开时也是通过文档id来打开百度云中对应的文件。

1）当点击的类型是office类型时，将以post方式向服务端file/openOffice.action发出请求；在FileController类中增加openOffice()方法，完成前端所发出的请求，代码如下所示；

/*** 打开文档* * @param currentPath* 当面路径* @param fileName* 文件名* @param fileType* 文件类型* @return Json对象（文件Id）*/ @RequestMapping("/openOffice") public @ResponseBody Result openOffice(String currentPath,String fileName, String fileType) {try {String openOffice = fileService.openOffice(request, currentPath,fileName);if (openOffice != null) {Result 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 officeid from office where officeMd5 = #{officeMd5}

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: '

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: ''+data+''});});} else if(fileType.indexOf("vido") >= 0){layer.open({type: 1,area: ['480px', '400px'],title:false,content: ''});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播放器（需额外安装）。

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";
}