前端代码（HTML、JavaScript、JSP）：
```html
<!-- 文件列表展示 -->
<table>
<thead>
<tr>
<th>文件名</th>
<th>文件大小</th>
<th>上传时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="fileList"></tbody>
</table>
<!-- 分页 -->
<div class="pagination">
<ul>
<li><a href="javascript:void(0);" onclick="getPageData(1)">首页</a></li>
<li><a href="javascript:void(0);" onclick="getPageData(currentPage-1)">上一页</a></li>
<li><a href="javascript:void(0);" onclick="getPageData(currentPage+1)">下一页</a></li>
<li><a href="javascript:void(0);" onclick="getPageData(totalPages)">末页</a></li>
<li><a href="javascript:void(0);">共<span id="totalPages"></span>页</a></li>
<li><a href="javascript:void(0);">当前第<span id="currentPage"></span>页</a></li>
</ul>
</div>
<!--
上传文件 -->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit" onclick="uploadFile()">上传</button>
</form>
<!-- 删除文件 -->
<button onclick="deleteFile()">删除</button>
<!-- 下载文件 -->
<a id="downloadLink" href="#" download></a>
<script>
var currentPage = 1; // 当前页码
var totalPages = 0; // 总页数
// 获取文件列表数据
function getPageData(page) {
currentPage = page;
$.ajax({
url: "/file/list",
type: "GET",
data: {
pageNum: currentPage
},
success: function(result) {
// 处理返回的数据
$("#fileList").html("");
$.each(result.records, function(index, item) {
var tr = "<tr>" +
"<td>" + item.fileName + "</td>" +
"<td>" + item.fileSize + "</td>" +
"<td>" + item.uploadTime + "</td>" +
"<td><input type='checkbox' name='fileId' value='" + item.id + "' /></td>" +
"</tr>";
$("#fileList").append(tr);
});
// 更新分页信息
totalPages = result.pages;
$("#totalPages").text(totalPages);
$("#currentPage").text(currentPage);
}
});
}
//
上传文件
function uploadFile() {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: "/file/upload",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function() {
alert("上传成功！");
getPageData(currentPage);
},
error: function() {
alert("上传失败！");
}
});
}
// 删除文件
function deleteFile() {
var fileIds = $("input[name='fileId']:checked").map(function() {
return $(this).val();
}).get();
if (fileIds.length == 0) {
alert("请选择要删除的文件！");
return;
}
$.ajax({
url: "/file/delete",
type: "POST",
data: {
fileIds: fileIds.join(",")
},
success: function() {
alert("删除成功！");
getPageData(currentPage);
},
error: function() {
alert("删除失败！");
}
});
}
// 下载文件
function downloadFile(fileId) {
$("#downloadLink").attr("href", "/file/download?fileId=" + fileId);
$("#downloadLink").get(0).click();
}
//
页面加载完成时获取第一页数据
$(function() {
getPageData(1);
});
</script>
```
后端代码（Java）：
```java
@Controller
@RequestMapping("/file")
public class FileController {
@Autowired
private FileSystem fileSystem;
// 分页展示文件列表
@GetMapping("/list")
@ResponseBody
public ResultVO<PageInfo<FileVO>> listFiles(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
List<FileVO> fileVOList = new ArrayList<>();
try {
RemoteIterator<LocatedFileStatus> fileStatusList = fileSystem.listFiles(new Path("/"), true);
while (fileStatusList.hasNext()) {
LocatedFileStatus fileStatus = fileStatusList.next();
FileVO fileVO = new FileVO();
fileVO.setId(UUID.randomUUID().toString());
fileVO.setFileName(fileStatus.getPath().getName());
long fileSize = fileStatus.getLen();
if (fileSize < 1024) {
fileVO.setFileSize(fileSize + " B");
} else if (fileSize < 1048576) {
fileVO.setFileSize(fileSize / 1024 + " KB");
} else {
fileVO.setFileSize(fileSize / 1048576 + " MB");
}
fileVO.setUploadTime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(fileStatus.getModificationTime())));
fileVOList.add(fileVO);
}
} catch (IOException e) {
e.printStackTrace();
}
PageInfo<FileVO> pageInfo = new PageInfo<>(fileVOList, pageNum, pageSize);
return ResultVO.success(pageInfo);
}
//
上传文件
@PostMapping("/upload")
@ResponseBody
public ResultVO<?> uploadFile(@RequestParam("file") MultipartFile file) {
try {
FSDataOutputStream outputStream = fileSystem.create(new Path("/" + file.getOriginalFilename()));
IOUtils.copyBytes(file.getInputStream(), outputStream, 4096, true);
return ResultVO.success();
} catch (IOException e) {
e.printStackTrace();
return ResultVO.error("
上传文件失败！");
}
}
// 删除文件
@PostMapping("/delete")
@ResponseBody
public ResultVO<?> deleteFile(@RequestParam("fileIds") String fileIds) {
String[] fileIdArray = fileIds.split(",");
for (String fileId : fileIdArray) {
try {
fileSystem.delete(new Path("/" + fileId), false);
} catch (IOException e) {
e.printStackTrace();
return ResultVO.error("删除文件失败！");
}
}
return ResultVO.success();
}
// 下载文件
@GetMapping("/download")
public void downloadFile(@RequestParam("fileId") String fileId, HttpServletResponse response) {
try {
FSDataInputStream inputStream = fileSystem.open(new Path("/" + fileId));
response.setHeader("Content-Disposition", "attachment; filename=" + fileId);
IOUtils.copyBytes(inputStream, response.getOutputStream(), 4096, true);
} catch (IOException e) {
e.printStackTrace();
}
}
}
```
其中，`FileVO` 类用于封装文件信息，`ResultVO` 类用于统一接口返回格式，`PageInfo` 类用于封装分页信息。
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
