1. Description
Recently, I encountered a need to browse user files, which is similar to accessing a list like Baidu Netdisk, including files and folders. This function is very simple to implement. The file list obtained from the server must at least have a file id and a parent file id. , whether folder these three fields
2. HTML design
The front-end layout depends on your actual design. Here I only simply display the folders and folders and the corresponding charts. Other information such as file time can also be displayed by itself. Here I use the table tag to display the file list, each file is a tr, the effect is as follows
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
#explorerContainer {
width: 800px;
margin: 0 auto;
/* display: none; */
}
.fileIco {
width: 32px;
height: 32px;
}
.fileRow {
width: 550px;
border-bottom: 1px solid #a75318;
line-height: 50px;
align-items: center;
padding: 0 20px;
margin-left: 110px;
}
.fileRow span {
height: 32px;
line-height: 32px;
}
.fileRow span {
margin: 0 10px;
}
.fileRow span a {
color: #582a0a;
}
</style>
<body>
<div id="explorerContainer">
<table>
<tbody>
<tr>
<td>
<div class="fileRow">
<span><a href="" id="upperLevel">上一级...</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="folder.png" alt="" class="fileIco">
<span><a href="">新建文件夹1</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="folder.png" alt="" class="fileIco">
<span><a href="javascript:void(0);">新建文件夹2</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="exe.png" alt="" class="fileIco">
<span><a href="">测试文件.exe</a></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
3. Display file list
After the style is set, let's try to display fixed files first. The files are stored in an array, and each file has a file id. I use the file path instead, as long as it is unique, so every file object here is There are three attributes: path, parent_path, and isdir, which respectively represent the file path, parent file path, and whether it is a folder
let upperLevelPath = ""
let files = [
{
"category": 6,
"fs_id": 934435682367559,
"isdir": 1,
"local_ctime": 1621308615,
"local_mtime": 1621308615,
"path": "/sharelink0-480654963977751/3dsmax/3dmax2022",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1621308615,
"server_filename": "3dmax2022",
"server_mtime": 1644238064,
"size": 0
},
{
"category": 5,
"fs_id": 517879331580918,
"isdir": 0,
"local_ctime": 1521869688,
"local_mtime": 1521869688,
"md5": "2a5f6be1bbc6d24fc172e887ed424604",
"path": "/sharelink3073240792-480654963977751/3dsmax/Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_001_003.sfx.exe",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1521869688,
"server_filename": "Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_001_003.sfx.exe",
"server_mtime": 1561784982,
"size": 2115408424
},
...
]
Write another function to traverse the files array and piece together the DOM display, but pay attention to the "up level" button to be treated specially, although it should have the function of a folder, but it is a special folder
let upperLevelPath = ""
function showFiles(tempList, parent_path) {
let tbody = $('<tbody><tr><td> <div class="fileRow"><span><a href="javascript:void(0);" path="' + upperLevelPath + '" id="upperLevel">上一级...</a></span></div></td></tr></tbody>')
for (var i = 0, len = tempList.length; i < len; i++) {
if (tempList[i].parent_path == parent_path) {
let img = $('<img alt="" class="fileIco">')
if (tempList[i].isdir == 1) {
img.attr("src", 'folder.png')
} else {
img.attr("src", "exe.png")
}
let span = $('<span><a href="javascript:void(0);" path="' + tempList[i].path + '" parent_path="' + tempList[i].parent_path + '" is_dir=' + tempList[i].isdir + ' fs_id=' + tempList[i].fs_id + ' >' + tempList[i].server_filename + '</a></span>')
let fileRowDiv = $('<div class="fileRow"></div>')
fileRowDiv.append(img)
fileRowDiv.append(span)
if (tempList[i].isdir == 0) {
fileRowDiv.append($('<div id="rlink_div_' + tempList[i].fs_id + '"></div>'))
}
tbody.append($('<tr><td>' + fileRowDiv[0].outerHTML + '</td></tr>'))
}
}
$('tbody').empty()
$('tbody').append(tbody)
}
showFiles(files, "/sharelink3073240792-480654963977751/3dsmax")
Let's take a look at the effect
4. Browse files
The file list can be obtained from the server. After obtaining it, call showFiles() to display it, but it does not have the click function. For example, clicking on a folder should display the files in the folder. When you click to enter a certain folder, record its parent path and save it to the "upper level" button. It is very convenient when you want to return to the previous level. There is no other way, but you can only get the parent of the child file and then find the parent of the parent in the file list. Don't worry about the parent folder being empty, because it can be connected to two levels, so the parent does not have to be empty. When you click on a file or folder, if you can’t find its subset in the file list, you can initiate a request from the server at this time. Of course, you should first determine whether the file list already exists. If it already exists, you can’t The request needs to be made again.
So the method of listening to click files is also easy to write
function monitorFileClick() {
$('.fileRow span a').click(function () {
let path = $(this).attr("path")
let id_ = $(this).attr("id")
if (id_ == "upperLevel") {
if (!upperLevelPath) {
lastPath = $(".fileRow span a").last().attr("parent_path")
console.log('lastPath:', lastPath)
if (!lastPath) {
alert("没有上一级了哦")
return
}
for (var i = files.length - 1; i >= 0; i--) {
if (files[i].path == lastPath && files[i].parent_path) {
upperLevelPath = files[i].parent_path
break
}
}
if (!upperLevelPath) {
alert("没有上一级了啦啦啦啦啦")
return
}
}
showFiles(files, upperLevelPath)
upperLevelPath = ""
} else {
if ($(this).attr('is_dir') == 1) {
let isIn = isInTempList(files, path)
if (!isIn) {
alert("点击了文件夹，发起请求")
}
if ($(this).attr("parent_path")) {
upperLevelPath = $(this).attr("parent_path")
}
showFiles(files, path)
} else {
console.log("这不是文件夹")
if ($(this).attr("isSuccess") == 1) {
return
}
alert("请求文件")
}
}
})
}
function isInTempList(tempList, path) {
console.log("isInTempList()", tempList.length, path)
for (var i = 0, len = tempList.length; i < len; i++) {
if (tempList[i].parent_path == path) {
return true
}
}
return false
}
When to call this method? Of course, it is called after displaying the list
function showFiles(tempList, parent_path) {
...
$('tbody').empty()
$('tbody').append(tbody)
monitorFileClick()
}
5. Complete code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
#explorerContainer {
width: 800px;
margin: 0 auto;
/* display: none; */
}
.fileIco {
width: 32px;
height: 32px;
}
.fileRow {
width: 550px;
border-bottom: 1px solid #a75318;
line-height: 50px;
align-items: center;
padding: 0 20px;
margin-left: 110px;
}
.fileRow span {
height: 32px;
line-height: 32px;
}
.fileRow span {
margin: 0 10px;
}
.fileRow span a {
color: #582a0a;
}
</style>
<body>
<div id="explorerContainer">
<table>
<tbody>
<tr>
<td>
<div class="fileRow">
<span><a href="" id="upperLevel">上一级...</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="folder.png" alt="" class="fileIco">
<span><a href="">新建文件夹1</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="folder.png" alt="" class="fileIco">
<span><a href="javascript:void(0);">新建文件夹2</a></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="fileRow">
<img src="exe.png" alt="" class="fileIco">
<span><a href="">测试文件.exe</a></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
let upperLevelPath = ""
let files = [
{
"category": 6,
"fs_id": 934435682367559,
"isdir": 1,
"local_ctime": 1621308615,
"local_mtime": 1621308615,
"path": "/sharelink0-480654963977751/3dsmax/3dmax2022",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1621308615,
"server_filename": "3dmax2022",
"server_mtime": 1644238064,
"size": 0
},
{
"category": 5,
"fs_id": 830937815955136,
"isdir": 0,
"local_ctime": 1521869699,
"local_mtime": 1521869699,
"md5": "a79f60762a81dba8fd806233e9941900",
"path": "/sharelink3073240792-480654963977751/3dsmax/Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_003_003.sfx.exe",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1521869699,
"server_filename": "Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_003_003.sfx.exe",
"server_mtime": 1561784982,
"size": 450021000
},
{
"category": 5,
"fs_id": 92781334838182,
"isdir": 0,
"local_ctime": 1521869691,
"local_mtime": 1521869691,
"md5": "4de7ffe1ca87511b599aa60a0bce4a24",
"path": "/sharelink3073240792-480654963977751/3dsmax/Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_002_003.sfx.exe",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1521869691,
"server_filename": "Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_002_003.sfx.exe",
"server_mtime": 1561784982,
"size": 2115408424
},
{
"category": 5,
"fs_id": 517879331580918,
"isdir": 0,
"local_ctime": 1521869688,
"local_mtime": 1521869688,
"md5": "2a5f6be1bbc6d24fc172e887ed424604",
"path": "/sharelink3073240792-480654963977751/3dsmax/Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_001_003.sfx.exe",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1521869688,
"server_filename": "Autodesk_3ds_Max_2019_EFGJKPS_Win_64bit_001_003.sfx.exe",
"server_mtime": 1561784982,
"size": 2115408424
},
{
"category": 6,
"fs_id": 381680330545337,
"isdir": 0,
"local_ctime": 1561785049,
"local_mtime": 1561785036,
"md5": "9afb7d34ac26ead6b7435421c7bd5014",
"path": "/sharelink3073240792-480654963977751/3dsmax/3dsmax2019zhuceji.zip",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1561785049,
"server_filename": "3dsmax2019zhuceji.zip",
"server_mtime": 1561785049,
"size": 2044074
},
{
"category": 6,
"fs_id": 934435682367559,
"isdir": 1,
"local_ctime": 1621308615,
"local_mtime": 1621308615,
"path": "/sharelink0-480654963977751/3dsmax/test",
"parent_path": "/sharelink0-480654963977751/3dsmax/3dmax2022",
"server_ctime": 1621308615,
"server_filename": "test",
"server_mtime": 1644238064,
"size": 0
},
{
"category": 6,
"fs_id": 934435682367559,
"isdir": 1,
"local_ctime": 1621308615,
"local_mtime": 1621308615,
"path": "/sharelink0-480654963977751/3dsmax/3dmax2023",
"parent_path": "/sharelink3073240792-480654963977751/3dsmax",
"server_ctime": 1621308615,
"server_filename": "3dmax2023",
"server_mtime": 1644238064,
"size": 0
},
{
"category": 6,
"fs_id": 934435682367559,
"isdir": 0,
"local_ctime": 1621308615,
"local_mtime": 1621308615,
"path": "/sharelink0-480654963977751/3dsmax/3dmax2023/test",
"parent_path": "/sharelink0-480654963977751/3dsmax/3dmax2023",
"server_ctime": 1621308615,
"server_filename": "3dmax2023test",
"server_mtime": 1644238064,
"size": 0
},
]
function showFiles(tempList, parent_path) {
let tbody = $('<tbody><tr><td> <div class="fileRow"><span><a href="javascript:void(0);" path="' + upperLevelPath + '" id="upperLevel">上一级...</a></span></div></td></tr></tbody>')
for (var i = 0, len = tempList.length; i < len; i++) {
if (tempList[i].parent_path == parent_path) {
let img = $('<img alt="" class="fileIco">')
if (tempList[i].isdir == 1) {
img.attr("src", 'folder.png')
} else {
img.attr("src", "exe.png")
}
let span = $('<span><a href="javascript:void(0);" path="' + tempList[i].path + '" parent_path="' + tempList[i].parent_path + '" is_dir=' + tempList[i].isdir + ' fs_id=' + tempList[i].fs_id + ' >' + tempList[i].server_filename + '</a></span>')
let fileRowDiv = $('<div class="fileRow"></div>')
fileRowDiv.append(img)
fileRowDiv.append(span)
if (tempList[i].isdir == 0) {
fileRowDiv.append($('<div id="rlink_div_' + tempList[i].fs_id + '"></div>'))
}
tbody.append($('<tr><td>' + fileRowDiv[0].outerHTML + '</td></tr>'))
}
}
$('tbody').empty()
$('tbody').append(tbody)
monitorFileClick()
}
function isInTempList(tempList, path) {
console.log("isInTempList()", tempList.length, path)
for (var i = 0, len = tempList.length; i < len; i++) {
if (tempList[i].parent_path == path) {
return true
}
}
return false
}
showFiles(files, "/sharelink3073240792-480654963977751/3dsmax")
function monitorFileClick() {
$('.fileRow span a').click(function () {
let path = $(this).attr("path")
let id_ = $(this).attr("id")
if (id_ == "upperLevel") {
if (!upperLevelPath) {
lastPath = $(".fileRow span a").last().attr("parent_path")
console.log('lastPath:', lastPath)
if (!lastPath) {
alert("没有上一级了哦")
return
}
for (var i = files.length - 1; i >= 0; i--) {
if (files[i].path == lastPath && files[i].parent_path) {
upperLevelPath = files[i].parent_path
break
}
}
if (!upperLevelPath) {
alert("没有上一级了啦啦啦啦啦")
return
}
}
showFiles(files, upperLevelPath)
upperLevelPath = ""
} else {
if ($(this).attr('is_dir') == 1) {
let isIn = isInTempList(files, path)
if (!isIn) {
alert("点击了文件夹，发起请求")
}
if ($(this).attr("parent_path")) {
upperLevelPath = $(this).attr("parent_path")
}
showFiles(files, path)
} else {
console.log("这不是文件夹")
if ($(this).attr("isSuccess") == 1) {
return
}
alert("请求文件")
}
}
})
}
</script>
</html>