<think>我们正在处理
一个文件上传模态框，需要支持两种文件暂存方式：拖拽文件
和选择文件。然后通过表单的提交按钮
一起上传。
思路：
1. 创建
一个模态框（modal），其中包含
一个文件拖放区域
和一个文件选择按钮。
2. 允许用户通过拖拽或点击选择文件，并将选择的文件暂存起来（比如存储在
一个数组中）。
3. 在模态框中显示已选择的文件列表，并允许删除某个已选文件。
4. 当用户点击表单的提交按钮时，将暂存的文件通过表单
一起上传（可以使用FormData）。
实现步骤：
- 模态框结构（使用Bootstrap模态框为例）
- 拖拽区域：监听dragover, dragleave, drop事件
- 文件选择按钮：监听change事件
- 存储文件列表（数组）
- 显示已选文件列表，每个文件项旁边有删除按钮
- 提交时，将文件列表中的文件添加到FormData中，通过
AJAX提交或直接作为表单的
一部分提交
注意：如果使用
AJAX提交，需要阻止表单的默认提交行为。
以下是代码示例（假设使用Bootstrap 5）：</think>### 文件上传模态框实现方案
以下是
一个完整的文件上传模态框实现，支持拖拽上传
和表单提交，使用 Bootstrap 5
和原生 JavaScript：
```html
<!-- 模态框结构 -->
<div class="modal fade" id="uploadModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header bg-light">
<h5 class="modal-title">文件上传</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form id="uploadForm" enctype="multipart/form-data">
<!-- 拖拽区域 -->
<div class="drop-zone border rounded p-5 text-center mb-3"
id="dropZone">
<i class="bi bi-cloud-arrow-up fs-1 mb-2"></i>
<p>拖拽文件到此处或<button type="button" class="btn btn-link p-0" id="browseBtn">浏览文件</button></p>
<input type="file" id="fileInput" class="d-none" multiple>
</div>
<!-- 文件预览区域 -->
<div id="filePreview" class="d-none">
<h6>已选择文件：</h6>
<ul class="list-group" id="fileList"></ul>
</div>
<!-- 表单字段 -->
<div class="mb-3">
<label class="form-label">描述</label>
<textarea class="form-control" name="description"></textarea>
</div>
<!-- 提交按钮 -->
<div class="d-grid">
<button type="submit" class="btn btn-primary">
<i class="bi bi-upload me-2"></i>上传文件
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
// 文件暂存数组
let filesToUpload = [];
// 初始化拖拽区域
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const browseBtn = document.getElementById('browseBtn');
const filePreview = document.getElementById('filePreview');
const fileList = document.getElementById('fileList');
const uploadForm = document.getElementById('uploadForm');
// 点击浏览按钮触发文件选择
browseBtn.addEventListener('click', () => fileInput.click());
// 文件选择处理
fileInput.addEventListener('change', (e) => {
handleFiles(e.target.files);
});
// 拖拽事件处理
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
// 拖拽区域样式变化
['dragenter', 'dragover'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.add('bg-light');
}, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.remove('bg-light');
}, false);
});
// 文件放置处理
dropZone.addEventListener('drop', (e) => {
const dt = e.dataTransfer;
handleFiles(dt.files);
}, false);
// 处理选择的文件
function handleFiles(files) {
filesToUpload = [...filesToUpload, ...files];
renderFileList();
filePreview.classList.remove('d-none');
}
// 渲染文件列表
function renderFileList() {
fileList.innerHTML = '';
filesToUpload.forEach((file, index) => {
const li = document.createElement('li');
li.className = 'list-group-item d-flex justify-content-between align-items-center';
li.innerHTML = `
<div>
<i class="bi bi-file-earmark me-2"></i>
${file.name} (${formatFileSize(file.size)})
</div>
<button type="button" class="btn btn-sm btn-outline-danger" data-index="${index}">
<i class="bi bi-trash"></i>
</button>
`;
fileList.appendChild(li);
});
// 添加删除事件
document.querySelectorAll('#fileList .btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const index = e.currentTarget.dataset.index;
filesToUpload.splice(index, 1);
renderFileList();
if (filesToUpload.length === 0) {
filePreview.classList.add('d-none');
}
});
});
}
// 格式化文件大小
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
// 表单提交处理
uploadForm.addEventListener('submit', (e) => {
e.preventDefault();
if (filesToUpload.length === 0) {
alert('请选择至少
一个文件');
return;
}
const formData = new FormData(uploadForm);
// 添加所有文件到表单数据
filesToUpload.forEach(file => {
formData.append('files[]', file);
});
// 显示上传状态
const submitBtn = uploadForm.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>上传中...';
// 模拟
AJAX上传（实际应用中替换为真实API）
setTimeout(() => {
console.log('上传文件:', filesToUpload);
console.log('表单数据:', Object.fromEntries(formData.entries()));
// 重置表单
filesToUpload = [];
uploadForm.reset();
filePreview.classList.add('d-none');
alert('文件上传成功！');
submitBtn.disabled = false;
submitBtn.innerHTML = '<i class="bi bi-upload me-2"></i>上传文件';
// 关闭模态框
bootstrap.Modal.getInstance(document.getElementById('uploadModal')).hide();
}, 1500);
});
</script>
<style>
.drop-zone {
border: 2px dashed #ccc;
transition: all 0.3s;
}
.drop-zone:hover, .drop-zone.dragover {
border-color: #0d6efd;
background-color: rgba(13, 110, 253, 0.05) !important;
}
</style>
```
### 功能说明：
1. **拖拽上传**：
- 支持多文件拖拽到指定区域
- 拖拽时有视觉反馈（边框颜色变化）
2. **文件暂存**：
- 使用 `filesToUpload` 数组暂存所有选择文件
- 实时显示文件列表
和大小
- 支持从列表中删除文件
3. **表单集成**：
- 文件与表单字段
一起提交
- 使用 FormData 处理多文件上传
- 提交时有加载状态提示
4. **用户体验优化**：
- 文件大小自动格式化
- 上传状态反馈
- 响应式设计适配不同设备
### 使用说明：
1. 点击"浏览文件"按钮或直接拖拽文件到区域
2. 文件会显示在预览区域，可删除不需要的文件
3. 填写描述信息（可选）
4. 点击"上传文件"提交所有内容
本文介绍了当使用setTimeout循环调用Ajax时可能出现的问题：如果每次Ajax回调返回的值相同，则浏览器可能仅发送一次请求并使用缓存数据。文章提供了解决方案，通过动态更改请求URL来避免这一问题。
扫一扫
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
