1. 创建springboot项目（什么项目自己定，不是非得springboot）
依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>
2. html代码（html页面名为FileHtml.html）后续js，css可自行拆分
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>File</title>
<style type="text/css">
/*隐藏details下箭头*/
details summary::-webkit-details-marker { display:none; }
/*设置字体*/
details summary{
color: black;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
/*隐藏悬浮的提示框*/
summary{
outline:none;
}
/*文件名称颜色*/
details p{
color: #696969;
cursor: pointer;
}
/*以下是设置滚动条样式 支持谷歌，不支持火狐和IE*/
/*style="height:700px;width:300px;overflow:auto"*/
.parentDiv{
width: 300px;
height: 700px;
overflow: auto;
margin: 5px;
border: none;
}
.parentDiv-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
.parentDiv-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #ccc;
/*background: #535353;*/
}
.parentDiv-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
/*以上是设置滚动条样式 支持谷歌，不支持火狐和IE*/
</style>
</head>
<body>
<button onclick="loadFile()">加载目录</button>
<div id="parentDIV" class="parentDiv parentDiv-1" >
<div id="loadFile"></div>
</div>
<script th:src="@{js/jquery-2.1.4.min.js}"></script>
<script th:inline="javascript">
// 缩进
var FILE_SPACE = " ";
// 文件夹图标
var IMG_DICTIONARY = "<img src='/imgs/aa1.png' width='15px' height='15px'> ";
$(function () {
loadFile();
})
// 加载一级菜单
function loadFile(){
$.get("listFiles",function(result){
$("#loadFile").html("");
var html = "<details><summary>"+IMG_DICTIONARY+result.pathName+"</summary>";
$.each(result.listFile, function (index, item) {
// pathName 为后台传的一级目录名称 catalogParent为父级目录名称
if(item.catalogParent==result.pathName){
// 2 为目录 1 为文件
if(item.catalogType == 2){
html += "<nobr><p id='"+item.currentName+"'><span style='color: black; font-weight: 700; font-size: 15px' οnclick='detailFile(""+item.catalogName+'","'+item.parentPath+'","'+item.currentName+'","'+item.hierarchy+"")'>"+FILE_SPACE+IMG_DICTIONARY+item.catalogName+"</span></p></nobr>";
}else{
var imgFile = fileImg(item.catalogName);
html+="<nobr><p οndblclick='detailFilePath(""+item.currentName+"")'>"+FILE_SPACE+imgFile+item.catalogName+"</p></nobr>";
}
}
})
html += "</details>";
$("#loadFile").html(html);
})
}
/**
* 一一加载指定目录（双击获取路径，单机加载目录下的文件）
* @param dn 文件 文件夹名称
* @param df 不包含文件名称的路径
* @param dd 当前文件，文件夹全称，包括目录名称
* @param count 层级（做缩进使用）
*/
function detailFile(dn, df, dd, count) {
// 拼接文件路径（不包含文件名称）传入后台 使用三个下划线是为了区分因为创建文件的时候可以使用下划线，但几乎不会用到三个下划线一起
var fileName = df+dn+"___";
$.get("listFiles", "fileName="+fileName, function (result) {
if(result.listFile.length == 0)
return;
$("p[id='"+dd+"']").html("");
// 定义点击的文件夹缩进
var nbspTitle = "";
for (var i = 0; i<Number(count)-Number(1); i++){
nbspTitle += " ";
}
// 定义文件缩进
var nbsp = "";
for (var i = 0; i<Number(count); i++){
nbsp += " ";
}
var html = "<details open><summary οndblclick='detailFilePath(""+dd+"")'>"+nbspTitle+IMG_DICTIONARY+dn+"</summary>";
$.each(result.listFile, function (index, item) {
if(item.parentPath==dd+"___"){
if(item.catalogType == 2){
html += "<nobr><p id='"+item.currentName+"'><span style='color: black; font-weight: 700; font-size: 15px' οnclick='detailFile(""+item.catalogName+'","'+item.parentPath+'","'+item.currentName+'","'+item.hierarchy+"")'>"+nbsp+IMG_DICTIONARY+item.catalogName+"</span></p></nobr>";
}else{
var imgFile = fileImg(item.catalogName);
html+="<nobr><p οndblclick='detailFilePath(""+item.currentName+"")'>"+nbsp+imgFile+item.catalogName+"</p></nobr>";
}
}
})
html += "</details>";
$("p[id='"+dd+"']").html(html);
} )
}
// 操作获取到的文件路径
function detailFilePath(path){
var split = path.split("___");
var str = "";
for (var i = 0; i < split.length; i ++){
str = str + split[i] + "\\";
}
str = str.substring(0, str.length-1)
console.log(path + "文件，目录路径："+str)
}
// 添加文件前置图标
function fileImg(name){
var file = name.substring(name.lastIndexOf(".")+1);
var IMG_NAME = "";
if (file == "xml")
IMG_NAME = "wjXml.png";
else if (file == "doc" || file == "docx")
IMG_NAME = "wjWord.png";
else if (file == "class")
IMG_NAME = "wjClass.png";
else if (file == "java")
IMG_NAME = "wjJava.png";
else if (file == "ppt")
IMG_NAME = "wjPPT.png";
else if (file == "pdf")
IMG_NAME = "wjPdf.png";
else if (file == "xls")
IMG_NAME = "wjExl.png";
else if (file == "sql")
IMG_NAME = "wjSql.png";
else if (file == "png" || file == "jpg" || file == "ico" || file == "icon")
IMG_NAME = "wjImg.png";
else if (file == "txt")
IMG_NAME = "wjTxt.png";
else if (file == "html")
IMG_NAME = "wjHtml.png";
else if (file == "css")
IMG_NAME = "wjCss.png";
else if (file == "js")
IMG_NAME = "wjJs.png";
else
IMG_NAME = "wjWz.png";
var IMG_FILE = "<img src='/imgs/"+IMG_NAME+"' width='15px' height='15px'> ";
return IMG_FILE;
}
</script>
</body>
</html>
3. 实体类
import lombok.Data;
import lombok.ToString;
@Data
@ToString
public class FileData {
// 当前文件名称
private String catalogName;
// 父级目录名称
private String catalogParent;
// 当前文件全路径
private String currentName;
// 父级路径
private String parentPath;
// 层级
private int hierarchy;
public FileData(String catalogName, String catalogParent, String currentName, String parentPath, int hierarchy, int catalogType) {
this.catalogName = catalogName;
this.catalogParent = catalogParent;
this.currentName = currentName;
this.parentPath = parentPath;
this.hierarchy = hierarchy;
this.catalogType = catalogType;
}
// 文件类型 1 文件 2 文件夹
private int catalogType;
public FileData() {
}
}
4. 工具类
import java.io.File;
import java.util.List;
public class FileUtil {
public static void loadFiles(String path, List<FileData> list, int index, int cj){
File file = new File(path);
// 层级缩进
cj += 1;
for (File listFile : file.listFiles()) {
if (listFile.isFile()){
String p = "";
// 判断路径是否需要截取
if (-1 == index)
p = listFile.getAbsolutePath();
else
p = listFile.getAbsolutePath().substring(index);
// 将\替换成___（三个下划线）因为前端js拼接时会转义
p = p.replace("\\", "___");
String parentPath = p.substring(0, p.indexOf(listFile.getName()));
// 将数据存到实体中
FileData fileData = new FileData(listFile.getName(), file.getName(), p, parentPath, cj,1);
list.add(fileData);
}else{
String p = "";
if (-1 == index)
p = listFile.getAbsolutePath();
else
p = listFile.getAbsolutePath().substring(index);
p = p.replace("\\", "___");
String parentPath = p.substring(0, p.indexOf(listFile.getName()));
parentPath = parentPath.replace("\\", "___");
FileData fileData = new FileData(listFile.getName(), file.getName(), p, parentPath, cj, 2);
list.add(fileData);
loadFiles(path + listFile.getName() + "\\", list, index, cj);
}
}
}
}
5. controller实现
// 跳转到页面（这个可根据情况省略）
@RequestMapping(value = "toFile")
public String toFile(){
return "FileHtml";
}
// 实际生成的文件数据
@ResponseBody
@RequestMapping(value = "listFiles")
public Map<String, Object> listFiles(String fileName){
// 创建集合存放所有的文件信息
List<FileData> list = new ArrayList<>();
// 要加载的路径
String path = "C:\\Users\\HASEE\\Desktop\\MiYou\\";
// 路径需求，根据需求截取路径（获取路径时）传 -1 为不截取
File file = new File(path);
String name = file.getName();
int index = path.indexOf(name);
// int index = -1;
FileUtil.loadFiles(path, list, index, 1);
if (null != fileName){
String fName = fileName.replace("___", "\\");
list = list.stream().filter(l -> l.getParentPath().equals(fileName) || l.getParentPath().equals(fName)).collect(Collectors.toList());
}else {
if(-1 != index)
list = list.stream().filter(l -> l.getParentPath().equals(name + "___")).collect(Collectors.toList());
}
Map<String, Object> map = new HashMap<>();
map.put("listFile", list);
map.put("path", path);
map.put("pathName", new File(path).getName());
return map;
}
6. 效果展示
7. 使用到的图标
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
