【jQuery】js实现文件浏览功能

1.说明

近期遇到一个浏览用户文件的需求，类似于访问百度网盘那样的列表，包含文件和文件夹，这个功能实现起来很简单，从服务器获取到的文件列表至少要有文件id、父级文件id、是否文件夹这三个字段

2.html设计

前端排版看你实际情况设计，我这里只简单展示文件夹和文件夹以及对应的图表就行，文件时间等其他信息也可以自行展示。我这里使用table标签展示文件列表，每一个文件都是一个tr，效果如下
在这里插入图片描述

<!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.展示文件列表

样式设置好之后，我们先试着展示固定的文件，文件保存在一个数组中，每一个文件都有文件id，我这里使用文件路径代替，只要是唯一的就行，所以这里的每一个文件对象都有path、parent_path、isdir这三个属性，分别表示文件路径、父级文件路径、是否文件夹

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
    },
    ...
]

再写一个函数遍历files文件数组，拼凑DOM展示，不过要注意“上一级”按钮要特别处理，虽然它应该具有文件夹的功能，但是它是一个特殊的文件夹

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")

再来看一下效果
在这里插入图片描述

4.浏览文件

文件列表可以从服务器获取，获取之后调用showFiles()进行出来，但还不具备点击功能，比如说点击文件夹应该展示该文件夹里的文件。当点击进入某个文件夹的时候记录一下它的父级路径，保存到“上一级”按钮，当要返回上一级的时候就很方便了，但是，如果还要再上一级，这时候就没办法了，不过，只能获取子文件的上级然后在文件列表里找到父级的父级，不用担心上级文件夹为空，因为能连进两级，那父级不必不为空。当点击了文件或文件夹，如果在文件列表里找不到它的子集了，这时候可以发起从服务器获取的请求，当然，应该先判断一下是否已经存在文件列表了，如果已经存在就不需要再次发起请求。
所以监听点击文件的方法也很容易写出来

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
}

什么时候调用这个方法呢？当然是展示完列表就调用

function showFiles(tempList, parent_path) {
    ...
    $('tbody').empty()
    $('tbody').append(tbody)

    monitorFileClick()
}

5.完整代码

<!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>