写一个可以手动上传文件夹,并且有展示框的html
时间: 2024-10-09 13:01:37 浏览: 18
创建一个HTML页面,用于手动上传文件夹并显示其内容,需要结合HTML、CSS以及一些JavaScript来实现。下面是一个简单的示例,使用HTML的`<input type="file">`元素让用户选择文件夹,然后通过JavaScript读取文件夹的内容:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文件夹上传</title>
<style>
#folder-list {
margin-bottom: 20px;
overflow-y: auto;
}
.list-item {
border-bottom: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<h2>选择文件夹:</h2>
<input type="directory" id="select-folder" accept=".zip,.tar.gz" onchange="loadFolderContent(this)">
<div id="folder-list"></div>
<script>
function loadFolderContent(input) {
if (!input.files || input.files.length === 0) return;
let folder = input.files[0];
let listElement = document.getElementById('folder-list');
// 模拟读取文件夹内容(这里只是一个占位符)
let fileList = ['文件1', '文件2', '文件夹3']; // 用数组模拟实际的文件列表
fileList.forEach(item => {
let listItem = document.createElement('div');
listItem.className = 'list-item';
listItem.textContent = item;
listElement.appendChild(listItem);
});
}
</script>
</body>
</html>
```
这个例子中,用户选择文件夹后,`loadFolderContent`函数会被触发,它会获取选择的文件,并显示一个简化的文件列表。请注意,由于浏览器安全限制,实际操作中可能无法直接读取文件夹内容,通常需要服务器端的支持来进行文件读取。
阅读全文