模拟找D盘的文件

需求：有这样一个需求，通过找D盘中图片，然后进行预览。当点击的是文件夹则能进入到下一级，如果点击的是图片则进行显示预览。java部分看不懂，就粘贴了一部分。

前端代码;
css部分：

<style>#files button {margin-right: 10px;background-color: #0b4180;color: white;}#files button:hover {background-color: #00B83F;color: #0C0C0C;}#file-list li:hover {cursor: pointer;color: red;}#showImg {width: 400px;height: 400px;}</style><div id="files"><h1>文件浏览</h1><button id="backfirst">返回上一级</button><button id="closeImg">关闭图片</button><ul id="file-list"></ul><img id="showImg" style="display: none;"></div>

JS部分：

javascript>javascript">const baseURL = 'http://localhost:15112/browse/'; // 修改为你的后端服务器地址,（注：这里服务器路径我删了一部分）let currentPathStack = ['files']; // 使用栈来记录当前路径$(document).ready(function () {fetchFiles();});function fetchFiles() {const path = currentPathStack[currentPathStack.length - 1]; // 获取当前路径console.log('当前路径:', path)$.ajax({type: 'GET',url: `${baseURL}${path}`,success: function (data) {const fileList = $('#file-list');fileList.empty(); // 清空之前的列表console.log('原始数据', data)data.forEach(item => {const li = $('<li></li></br>');li.text(item.name);li.on('click', function (e) {//e.stopPropagation(); // 阻止事件冒泡，防止点击 li 时触发 ul 的点击事件if (item.directory == true) {currentPathStack.push(`${path}-${item.name}`); // 将当前文件夹路径推入栈中$('#backfirst').prop('disabled', false); // 启用返回按钮$('#showImg').hide();$('#closeImg').hide();fetchFiles(); // 递归调用以加载新目录的内容} else if (item.directory == false) {$('#showImg').attr('src', `data:image/jpeg;base64,${item.data}`);$('#showImg').show(); // 显示图片// 显示关闭图片的按钮$('#closeImg').show();}});fileList.append(li);});// 如果栈中不止一个元素（即不在根目录），则启用返回按钮$('#backfirst').prop('disabled', currentPathStack.length <= 1);},error: function (error) {console.error('请求失败:', error);}});}// 返回上一级目录$('#backfirst').click(function () {if (!$(this).is(':disabled')) { // 确保按钮没有被禁用currentPathStack.pop(); // 弹出当前路径// 在返回上一级目录时，隐藏图片并隐藏关闭按钮$('#showImg').hide();$('#closeImg').hide();fetchFiles(); // 加载上一级目录的内容}});// 关闭图片按钮的点击事件$('#closeImg').click(function () {// 隐藏图片并隐藏关闭按钮$('#showImg').hide();$('#closeImg').hide();});

后端部分：
controller.java文件夹

java"> @GetMapping("/browse/{path:.+}")@ResponseBodypublic List<FileItem> browse(@PathVariable String path) throws IOException {File dir = new File("D:\\"+path.replaceAll("-","/"));//这里用-转为/，我直接用斜杠不行，所以后端直接转换了一下，就能用了List<FileItem> items = new ArrayList<>();for (File file : dir.listFiles()) {if (file.isDirectory()) {items.add(new FileItem(file.getName(), true, file.getAbsolutePath()));} else {items.add(new FileItem(file.getName(), false, encodeImageToBase64(file)));}}return items;}private String encodeImageToBase64(File imageFile) throws IOException {// 将图片文件转换为Base64编码的字符串try (FileInputStream fis = new FileInputStream(imageFile)) {byte[] buffer = new byte[1024];ByteArrayOutputStream baos = new ByteArrayOutputStream();int bytesRead;while ((bytesRead = fis.read(buffer)) != -1) {baos.write(buffer, 0, bytesRead);}byte[] imageBytes = baos.toByteArray();return Base64.getEncoder().encodeToString(imageBytes);}}

fileItem.java文件夹

java">public class FileItem {String name;boolean isDirectory;String data; // 对于图片，存储Base64编码的字符串；对于文件夹，存储路径public FileItem(String name, boolean isDirectory, String data) {this.name = name;//文件及文件夹名字this.isDirectory = isDirectory;//判断是文件夹还是文件（图片）this.data = data;//路径}public String getName() {return name;}public void setName(String name) {this.name = name;}public boolean isDirectory() {return isDirectory;}public void setDirectory(boolean directory) {isDirectory = directory;}public String getData() {return data;}public void setData(String data) {this.data = data;}
}