<!
-- 文件上传模态框
-->
<div id="myModal" class="modal">
<div class="modal
-content">
<!
-- 模态框头部
-->
<div class="modal
-header">
<span class="modal
-title">上传文件</span> <!
-- 模态框
标题 -->
<span class="close">×</span> <!
-- 关闭按钮（×符号）
-->
</div>
<!
-- 模态框主体内容
-->
<div class="modal
-body">
<!
-- 文件拖放区域
-->
<div class="file
-drop
-area">
<i class="fas fa
-cloud
-upload
-alt"></i> <!
-- 上传图标
-->
<h
3>拖放文件到此处</h
3> <!
-- 提示文字
-->
<p>或点击下方按钮选择文件</p> <!
-- 提示文字
-->
<input type="file" id="fileInput" class="file
-input"> <!
-- 隐藏的文件输入框
-->
<button class="btn btn
-primary" id="uploadBtn">选择文件</button> <!
-- 选择文件按钮
-->
</div>
<!
-- 文件信息显示区域（默认隐藏）
-->
<div class="file
-info" id="fileInfo">
<p>已选择文件：<span id="fileName"></span></p> <!
-- 显示选中文件名
-->
</div>
</div>
<!
-- 模态框底部按钮区域
-->
<div class="modal
-footer">
<button class="btn btn
-secondary" id="closeModalBtn">关闭</button> <!
-- 关闭模态框按钮
-->
<button class="btn btn
-success" id="confirmUploadBtn">确认上传</button> <!
-- 确认上传按钮
-->
</div>
</div>
</div>
<!
-- 页面加载完成后执行的脚本
-->
<script>
// DOM内容加载完成后执行
document.addEventListener
(&#
39;DOMContentLoaded&#
39;, function
() {
// 获取所有导航链接和页面内容元素
const navLinks = document.querySelectorAll
(&#
39;.nav
-link&#
39;
);
const pages = document.querySelectorAll
(&#
39;.page
-content&#
39;
);
// 为每个导航链接添加点击事件监听器
navLinks.forEach
(link => {
link.addEventListener
(&#
39;click&#
39;, function
(e
) {
e.preventDefault
(); // 阻止默认链接跳转行为
// 移除所有导航链接和页面的激活状态
navLinks.forEach
(nav => nav.classList.remove
(&#
39;active&#
39;
));
pages.forEach
(page => page.classList.remove
(&#
39;active&#
39;
));
// 为当前点击的链接和对应页面添加激活状态
this.classList.add
(&#
39;active&#
39;
); // 获取页面ID
const pageId = this.getAttribute
(&#
39;data
-page&#
39;
);
document.getElementById
(pageId
).classList.add
(&#
39;active&#
39;
); // 显示对应页面
}
);
}
);
// 默认激活首页
document.getElementById
(&#
39;dashboard&#
39;
).classList.add
(&#
39;active&#
39;
);
}
);
</script>
<!
-- 文件上传模态框交互脚本
-->
<script>
// 获取模态框相关元素
const modal = document.getElementById
(&#
39;myModal&#
39;
); // 模态框元素
const openModalBtn = document.getElementById
(&#
39;openModalBtn&#
39;
); // 打开模态框按钮
const closeModalBtn = document.querySelector
(&#
39;.close&#
39;
); // 关闭按钮（×）
const fileInput = document.getElementById
(&#
39;fileInput&#
39;
); // 文件输入框
const uploadBtn = document.getElementById
(&#
39;uploadBtn&#
39;
); // 选择文件按钮
const confirmUploadBtn = document.getElementById
(&#
39;confirmUploadBtn&#
39;
); // 确认上传按钮
const fileInfo = document.getElementById
(&#
39;fileInfo&#
39;
); // 文件信息显示区域
const fileName = document.getElementById
(&#
39;fileName&#
39;
); // 文件名显示元素
// 打开模态框按钮点击事件
openModalBtn.addEventListener
(&#
39;click&#
39;, function
() {
modal.style.display = &#
39;block&#
39;; // 显示模态框
// 计算模态框垂直
居中位置
var modal
Dialog = modal.querySelector
(&#
39;.modal
-content&#
39;
);
var m_top =
(window.innerHeight
- modal
Dialog.offsetHeight
) / 2;
modal
Dialog.style.margin = m_top + &#
39;px auto&#
39;; // 设置模态框
居中
}
);
// 关闭按钮（×）点击事件
closeModalBtn.addEventListener
(&#
39;click&#
39;, function
() {
modal.style.display = &#
39;none&#
39;; // 隐藏模态框
}
);
// 选择文件按钮点击事件
uploadBtn.addEventListener
(&#
39;click&#
39;, function
() {
fileInput.click
(); // 触发隐藏的文件输入框点击事件
}
);
// 文件输入框内容改变事件
fileInput.addEventListener
(&#
39;change&#
39;, function
() {
// 如果有文件被选择
if
(fileInput.files.length > 0
) {
fileInfo.classList.add
(&#
39;show&#
39;
); // 显示文件信息区域
fileName.textContent = fileInput.files[0].name; // 显示选中文件名
}
}
);
// 确认上传按钮点击事件
confirmUploadBtn.addEventListener
(&#
39;click&#
39;, function
() {
const file = fileInput.files[0]; // 获取选中的文件
// 如果有文件被选择
if
(file
) {
console.log
(&#
39;准备上传文件：&#
39;, file.name
);// 在控制台输出文件名
// 这里可以添加实际的上传逻辑（如 fetch / axios）
} else {
console.log
(&#
39;请先选择文件&#
39;
); // 如果没有选择文件，输出提示
}
}
);
</script>
以上代码我想在多地方同时使用，请问怎么设计
扫一扫
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
