上传前端准备(2)

支持拖拽上传
This commit is contained in:
Chenx221 2024-02-12 15:27:14 +08:00
parent 93a86a4a5b
commit b384869763
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
2 changed files with 86 additions and 2 deletions

View File

@ -16,7 +16,7 @@ table a {
line-height: 2;
}
.file_info{
.file_info {
font-size: large;
line-height: 2;
}
@ -36,3 +36,35 @@ table a {
.action-col {
width: 18%;
}
.breadcrumb {
border-radius: 0.375rem;
}
.breadcrumb .breadcrumb-item {
text-decoration: none;
}
.dropdown-menu {
--bs-dropdown-min-width: auto !important;
}
#drop-area.dragging {
border: 2px dashed #999;
background: #f8f8f8;
z-index: 1000;
opacity: 0.7;
/*position: relative;*/
}
#drop-area.dragging::after {
content: "⇧\A拖拽文件到这里";
white-space: pre;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: #000000;
text-align: center;
}

View File

@ -17,3 +17,55 @@ $(document).on('click', '.delete-btn', function () {
$('#deleteRelativePath').val(relativePath);
$('#deleteModal').modal('show');
});
$(document).on('click', '.file-upload-btn', function () {
console.log('你点击了上传文件,但功能尚未实现');
});
$(document).on('click', '.folder-upload-btn', function () {
console.log('你点击了上传文件夹,但功能尚未实现');
});
$(document).on('click', '.offline-download-btn', function () {
console.log('你点击了离线下载,但功能尚未实现');
});
var dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
});
dropArea.addEventListener('drop', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 获取用户拖拽的文件或文件夹
var items = event.dataTransfer.items;
// 遍历项目
for (var i = 0; i < items.length; i++) {
var item = items[i];
uploadFile(item.getAsFile());
dropArea.classList.remove('dragging');
}
});
dropArea.addEventListener('dragenter', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 添加 dragging 类
dropArea.classList.add('dragging');
});
dropArea.addEventListener('dragleave', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 如果相关目标是拖拽区域或其子元素,那么就不移除 dragging 类
if (!dropArea.contains(event.relatedTarget)) {
// 移除 dragging 类
dropArea.classList.remove('dragging');
}
});
function uploadFile(file) {
console.log('准备上传,但功能尚未实现');
}