html实现文件管理

金州
已于 2024-01-04 11:25:37 修改
阅读量706
点赞数 10
文章标签： html
于 2024-01-03 14:31:09 首次发布
本文链接：https://blog.csdn.net/remindingme/article/details/135363140
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>云盘</title>
	</head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../css/public.css">
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../css/global.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="../utils/axios.min.js"></script>
	<script src="../js/proData.js"></script>
	<script src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../js/md5.js"></script>
	<script type="text/javascript" src="../js/js-md5.js"></script>
	<script src="../js/layer-v3.1.1/layer/layer.js"></script>
	<script type="text/javascript" src="../js/token.js"></script>
	<script src="/static/js/permission.js"></script>

	<body>
		<div class="contentBox">
			<!--查询框-->
			<div class="query-box">
				<div class="query-title">云盘</div>
				<div class="query-file">
					<div style="display: flex;">
						<div class="query-topbox">
							<div class="query-name">文件名 </div>
							<input type="text" name="name" placeholder="查找" id="name"
								onkeyup="this.value=this.value.replace(/[, ]/g,'')" maxlength="20" />
						</div>
						<div class="btnstyle btnblue" onclick="getuserinfo()">查询</div>
					</div>
					<div style="display: flex;">
						<div class="btnstyle btnorange" onclick="showAddDirectory()">
							新建目录
						</div>
						<div class="btnstyle btncyan">
							上传文件
						</div>
					</div>
				</div>
			</div>
			<!--查询框end-->

			<!--列表-->
			<div class="tableBox">
				<table class="table table-hover">
					<div class="file-btnbox">
						<div class="alluser">全部文件（<span id="allUser"></span>）</div>
						<div>
							<span onclick="tabsClick('root')" class="tabs">根目录</span>
							<span id="tabsId"></span>
						</div>
					</div>
					<thead>
						<tr>
							<th>文件名</th>
							<th>后缀</th>
							<th>大小</th>
							<th>时间</th>
							<th>类型</th>
							<th>路径</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<!--列表-->

			<!--新建目录-->
			<div class="popup" id="addDirectoryPopup">
				<div class="popup-inner">
					<div class="poptitle">新建目录</div>
					<div>
						<form id="userForm">
							<div class="pop-inputbox" id="passwordDiv">
								<div class="poptext">目&emsp;录&emsp;名</div>
								<input type="text" name="folder_name" id="folder_name" placeholder="请输入目录名"
									maxlength="200" />
							</div>
							<div class="popbtnbox">
								<div class="popbtn white" onclick="closeAddDirectory()">取消</div>
								<div class="popbtn blue" onclick="submitDirectory()">提交</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!--新建目录end-->
		</div>
	</body>

	<script>
		window.onload = function() {
			getFileList();
		}

		// 打开新建目录
		function showAddDirectory() {
			document.getElementById("addDirectoryPopup").style.display = "block";
		}

		// 关闭新建目录
		function closeAddDirectory() {
			document.getElementById("addDirectoryPopup").style.display = "none";
			document.querySelector('#folder_name').value = '';
		}

		// 提交新建目录
		function submitDirectory() {
			const folder_name = document.querySelector('#folder_name').value;
			if (!folder_name) {
				layer.msg('目录名不能为空');
				return;
			}
			const config = {
				method: 'post',
				url: `${BASEURL}/files/folder`,
				data: {
					folder_name
				}
			};
			axios(config)
				.then(response => {
					if (response.data.status) {
						getFileList();
						layer.msg('创建目录成功');
						closeAddDirectory()
					} else {
						layer.msg(response.data.msg);
					}
				})
				.catch(error => {
					console.log(error);
				});
		}


		var tabsList = [];
		/**
		 * 获取文件列表
		 */
		function getFileList(current_path) {
			let html = '';
			const config = {
				method: 'get',
				url: `${BASEURL}/files`,
				params: {
					current_path: current_path
				}
			};
			axios(config)
				.then(res => {
					const table = document.querySelector('table');
					if (!table) return;
					const tbody = table.querySelector('tbody');
					if (!tbody) return;
					let arr = null;
					console.info("打印------", res)
					if (res.data.data != null) {
						arr = res.data.data.files;
					}
					if (arr !== null && arr !== undefined) {
						arr.forEach(files => {
							var rowData = JSON.stringify(files)
							html += `
                                <tr>
                                    <td><span class="tab"  onclick='fileClick(${rowData})'>${files.name}</span></td>
                                    <td>${files.suffix}</td>
                                    <td>${files.size}</td>
                                    <td>${files.modify_time}</td>
                                    <td>${files.type === 10 ? '文件夹' : files.type === 20 ? '文件' : ''}</td>
                                    <td>${files.path}</td>
                                    <td style="width: 200px;">
                                        <span class="operate" onclick='delFile(${rowData})' style="color: red; ">删除</span>
                                    </td>
                                </tr>
                                `;
						});
					} else {
						html += `<tr>
                                 <td colspan="9" style="color: #898989;">暂无数据</td>
                                 </tr>`;
					}
					tbody.innerHTML = "";
					tbody.innerHTML = html;
					initTabsDiv();
				})
				.catch(err => console.log(err));
		}

		//文件夹点击事件
		function fileClick(item) {
			tabsList.push(item);
			getFileList(item.path);
		}

		//渲染面包屑
		function initTabsDiv() {
			var tabsDiv = document.getElementById('tabsId');
			tabsDiv.innerHTML = '';
			for (var i = 0; i < tabsList.length; i++) {
				var tab = tabsList[i];
				var fileDiv = document.createElement('span');
				fileDiv.className = "tabs";
				fileDiv.id = tab.path;
				fileDiv.onclick = (function(tab) {
					return function() {
						tabsClick(tab.path);
					};
				})(tab);;
				fileDiv.innerText = '>' + tab.name;
				tabsDiv.appendChild(fileDiv);
			}
		}

		//面包屑点击事件
		function tabsClick(path) {
			if (path == 'root') {
				tabsList = [];
				getFileList()
			} else {
				for (var j = 0; j < tabsList.length; j++) {
					if (tabsList[j].path == path) {
						tabsList = tabsList.slice(0, j + 1);
						break;
					}
				}
			}
			getFileList()
		}
	</script>

	<style scoped>
		html {
			height: 100%;
		}

		body {
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;
			background: white;
		}

		.userpage {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		input {
			width: 259px;
			height: 32px;
			/* background: #f7f8fa; */
			border: 1px solid #f6f6f6;
			padding-left: 5px;
			border-radius: 3px;
		}

		input:focus {
			outline: none;
			background-color: #c2e0ff33;
			border: 1px solid #3799ff !important;
		}

		td,
		th {
			width: 158px;
			height: 40px;
			text-align: center;
		}

		td {
			padding: 10px;
		}

		th {
			font-size: 14px;
			color: #7c828f;
			font-weight: normal;
			background: #f0f8ff8f;
		}

		tr {
			border-bottom: 1px solid #6f6f6f36 !important;
		}

		.tabs {
			cursor: pointer;
		}

		.tabs:hover {
			color: blue;
		}

		.operate {
			cursor: pointer;
			margin-right: 15px;
		}

		@media(max-width:1360px) {

			td,
			th {
				width: 100px;
			}
		}
	</style>

</html>