lsm/file-online-preview
1
0
Fork 0
mirror of https://gitee.com/kekingcn/file-online-preview.git synced 2025-08-20 00:44:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

增加多文件预览功能

Browse Source
This commit is contained in:
戴盛利 2024-11-14 22:16:08 +08:00
parent cc63659650
commit 3fe031448a
2 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
server/src/main/java/cn/keking/web/controller/OnlinePreviewController.java
View File

@ -33,6 +33,7 @@ import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
@ -84,6 +85,33 @@ public class OnlinePreviewController {
return filePreview.filePreviewHandle(fileUrl, model, fileAttribute); //统一在这里处理 url
}
@GetMapping( "/filesPreview")
public String filesPreview(String urls, Model model, HttpServletRequest req) {
String fileUrls = null;
try {
fileUrls = WebUtils.decodeUrl(urls);
// 防止XSS攻击
fileUrls = KkFileUtils.htmlEscape(fileUrls);
} catch (Exception ex) {
String errorMsg = String.format(BASE64_DECODE_ERROR_MSG, "urls");
return otherFilePreview.notSupportedFile(model, errorMsg);
}
logger.info("批量预览文件url：{}，urls：{}", fileUrls, urls);
String[] files = fileUrls.split("\\|");
List<FileAttribute> fileAttributes= new ArrayList<>();
for (String fileUrl : files) {
FileAttribute fileAttribute = fileHandlerService.getFileAttribute(fileUrl, req);
logger.info("预览文件url：{}，previewType：{}", fileUrl, fileAttribute.getType());
fileUrl = WebUtils.urlEncoderencode(fileUrl);
if (ObjectUtils.isEmpty(fileUrl)) {
return otherFilePreview.notSupportedFile(model, "非法路径,不允许访问");
}
fileAttributes.add(fileAttribute);
}
model.addAttribute("fileAttributes", fileAttributes);
return "/filesPreview";
}
@GetMapping( "/picturesPreview")
public String picturesPreview(String urls, Model model, HttpServletRequest req) {
String fileUrls;

73
server/src/main/resources/web/filesPreview.ftl Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多文件预览</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootbox.min.js" type="text/javascript"></script>
<script src="js/base64.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.files {
margin: 0;
padding: 10px;
width: 250px;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #ccc;
}
.iframe {
margin: 0;
padding: 0;
width: calc(100% - 250px);
height: 100%;
box-sizing: border-box;
border: none;
}
</style>
</head>
<body>
<div class="files">
<div class="list-group">
<#list fileAttributes as file>
<button type="button" class="list-group-item list-group-item-action"
data-url="${file.url}">${file.name}</button>
</#list>
</div>
</div>
<iframe id="iframe" class="iframe"></iframe>
<script type="application/javascript">
$(document).ready(function () {
const firstUrl = '/onlinePreview?url='+encodeURIComponent(Base64.encode($('.list-group-item').first().attr("data-url")))
$('#iframe').attr('src', firstUrl);
$('.list-group-item').first().addClass('active');
$('.list-group-item').on('click', function() {
$('.list-group-item').removeClass('active');
$(this).addClass('active');
const url = '/onlinePreview?url='+encodeURIComponent(Base64.encode($(this).attr("data-url")))
$('#iframe').attr('src', url);
});
});
</script>
</body>
</html>