f2e-server
Version:
f2e-server 2
135 lines (129 loc) • 4.59 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=pathname%>/</title>
<style>
body { min-height: 90vh; }
ul li a { margin-right: 20px; }
ul li.candel:focus:after { font-size: 13px; content: ' Del按键/鼠标双击 删除文件'; }
.contextmenu { position: absolute; display: none; background: #fff; box-shadow: 3px 3px 15px #999; }
.contextmenu > a { display: block; padding: 5px 12px; line-height: 20px; }
.info-bar { position: fixed; left: 1rem; bottom: 1rem; }
.uploading {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
padding-top: 20%;
box-sizing: border-box;
font: 500 72px/2 Arial;
z-index: 9999;
background: rgba(0, 0, 0, .3);
color: #fff;
}
</style>
</head>
<body>
<ul>
<li><a href="${dirname ? ('/' + dirname) : '/'}">..</a></li>
<%=Object.keys(store).sort().map(k => ` <li tabindex="1"><a href="/${pathname ? (pathname + '/' + k) : k}">${k}</a></li>`).join('\n')%>
</ul>
<% if (conf.authorization) { %>
<div class="info-bar">本页面支持拖拽上传文件(仅支持单文件,不支持文件夹)
也可点击上传 <input type="file" />
</div>
<div class="contextmenu">
<a href="javascript:;" class="new_folder">新建文件夹</a>
</div>
<script>
const list = document.querySelectorAll('ul li[tabindex="1"]')
/**
* @type {HTMLInputElement}
**/
const input_file = document.querySelector('input[type=file]')
const Fetch = (url, option) => {
const uploading = document.createElement('div')
uploading.classList.add('uploading')
uploading.innerText = 'uploading...'
document.body.appendChild(uploading)
fetch(url, option).then(res => {
switch (res.status) {
case 500:
res.text().then(err => {
const div = document.createElement('div')
div.innerHTML = err
alert(div.innerText)
})
break;
case 200:
setTimeout(() => {
location.reload()
}, 100);
}
})
}
list.forEach(el => {
const file = el.innerText.trim()
el.classList.add('candel')
el.addEventListener('keyup', e => {
switch(e.keyCode) {
case 8: confirm('确定删除' + file) && Fetch('?file=' + file, { method: 'DELETE' });
}
})
el.addEventListener('dblclick', function () {
confirm('确定删除' + file) && Fetch('?file=' + file, { method: 'DELETE' });
})
})
document.body.addEventListener('drop', function (e) {
e.preventDefault()
e.stopPropagation()
const file = e.dataTransfer.files[0]
if (file) {
Fetch('?file=' + file.name, {
method: 'PUT',
body: file
})
}
})
input_file.addEventListener('change', function (e) {
const file = input_file.files[0]
if (file) {
Fetch('?file=' + file.name, {
method: 'PUT',
body: file
})
}
})
document.body.addEventListener('dragover', function (e) {
e.preventDefault()
})
const contextmenu = document.querySelector('.contextmenu')
document.body.addEventListener('click', function (e) {
if (e.target === contextmenu || contextmenu.contains(e.target)) {
const item = e.target
switch (item.className) {
case 'new_folder':
contextmenu.style.cssText = ''
setTimeout(() => {
const file = prompt('请输入文件夹名称')
file && Fetch('?file=' + file, { method: 'POST' }).then(() => location.reload())
}, 100);
break;
}
} else {
contextmenu.style.cssText = ''
}
})
document.body.addEventListener('contextmenu', function (e) {
contextmenu.style.cssText = 'left: ' + e.x + 'px; top: ' + e.y + 'px; display: block;'
e.preventDefault();
})
</script>
<% } %>
</body>
</html>