file-manger/gin/template/index/content.tmpl

<div id="content-page">
    <div class="nav-bar">
        <div class="nav-logo"></div>
        <div class="nav-menu">
            <div class="nav-menu-item">首页</div>
            <div class="nav-menu-item">文件管理</div>
            <div class="nav-menu-item">用户管理</div>
        </div>
        <div class="nav-user"></div>
    </div>
    <div class="content-body">
        <div id="drop-zone">拖拽文件到这里，或者点击选择文件</div>
        <input type="file" id="file-input" style="display: none;" webkitdirectory directory/>

        存储文件信息<br/>
        文件快捷上传<br/>
        服务器信息查看（负载、内存、硬盘）<br/>
        文件下载<br/>
    </div>
</div>
<script>
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');

    // 点击区域，打开文件选择框
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    // 文件选择框改变事件
    fileInput.addEventListener('change', (event) => {
        handleFiles(event.target.files);
    });

    // 拖拽事件处理
    dropZone.addEventListener('dragover', (event) => {
        event.preventDefault(); // 必须阻止默认行为才能触发 drop 事件
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (event) => {
        event.preventDefault(); // 阻止默认行为
        dropZone.classList.remove('dragover');
        const files = event.dataTransfer.files;
        handleFiles(files);
    });

    function handleFiles(files) {
        if (files.length > 0) {
            const formData = new FormData();

            // 遍历文件夹中的每个文件
            for (let i = 0; i < files.length; i++) {
                formData.append("files[]", files[i]); // 'files[]' 是后端接收的字段名
            }

            // 创建一个请求对象，上传文件到后端
            fetch("/file/upload", {
                method: "POST",
                body: formData,
                // headers: {
                //     "Content-Type": "multipart/form-data",
                // }
            })
                .then(response => response.json())
                .then(data => {
                    alert(data.message); // 返回的服务器响应
                })
                .catch(error => {
                    alert("上传失败: " + error.message);
                });
        }
    }
</script>