Bootstrap 中实现文件上传控件

在 Bootstrap 中实现文件上传控件有多种方式，以下是一些常见的实现方法和示例：

---

1. 使用 Bootstrap 5 的默认文件上传控件

Bootstrap 5 提供了简洁的文件上传控件样式，可以直接使用 Bootstrap 的表单控件类来实现。

HTML 示例

HTML复制

<div class="mb-3"><label for="formFile" class="form-label">Default file input example</label><input class="form-control" type="file" id="formFile">
</div>

预览

支持多文件上传

添加 multiple 属性可以支持多文件选择。

HTML复制

<div class="mb-3"><label for="formFileMultiple" class="form-label">Multiple files input example</label><input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

预览

---

2. 使用 Bootstrap File Input 插件

Bootstrap File Input 是一个强大的文件上传插件，支持文件预览、上传进度显示等功能。

HTML 结构

HTML复制

<div class="file-loading"><input id="singleFile" name="file" type="file">
</div>

预览

初始化插件

JavaScript复制

$(document).ready(function() {$("#singleFile").fileinput({uploadUrl: "/upload", // 文件上传路径language: "zh", // 语言设置allowedFileExtensions: ["jpg", "png", "docx"], // 允许的文件类型showUpload: true, // 是否显示上传按钮showPreview: true, // 是否显示预览maxFileCount: 1, // 最大文件数量autoReplace: true // 自动替换});
});

---

3. 自定义文件上传控件

如果需要更复杂的文件上传功能，可以结合 HTML 和 JavaScript 自定义文件上传控件。

HTML 示例

HTML复制

<div class="mb-3"><label for="customFile" class="form-label">Custom file input</label><input type="file" class="form-control" id="customFile">
</div>

预览

JavaScript 示例

JavaScript复制

document.getElementById("customFile").addEventListener("change", function(event) {const file = event.target.files[0];console.log("File selected:", file);
});

---

4. 带拖拽功能的文件上传

可以使用 JavaScript 实现拖拽上传功能。

HTML 示例

HTML复制

<div class="mb-3"><label for="formFile" class="form-label">Drag and drop file upload</label><div id="dropZone" class="border border-primary rounded p-4 text-center">Drag and drop a file here or click to select</div><input type="file" id="formFile" class="d-none">
</div>

预览

JavaScript 示例

JavaScript复制

const dropZone = document.getElementById("dropZone");
const formFile = document.getElementById("formFile");dropZone.addEventListener("click", () => formFile.click());
dropZone.addEventListener("dragover", (e) => {e.preventDefault();dropZone.classList.add("bg-light");
});
dropZone.addEventListener("dragleave", () => dropZone.classList.remove("bg-light"));
dropZone.addEventListener("drop", (e) => {e.preventDefault();dropZone.classList.remove("bg-light");formFile.files = e.dataTransfer.files;
});

---

5. 使用 AJAX 上传文件

可以结合 AJAX 实现异步文件上传，并在上传过程中显示进度。

HTML 示例

HTML复制

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data"><div class="mb-3"><label for="formFile" class="form-label">Upload file</label><input class="form-control" type="file" id="formFile" name="file"></div><button type="submit" class="btn btn-primary">Upload</button>
</form>
<div class="progress d-none mb-3"><div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>

预览

JavaScript 示例

JavaScript复制

document.getElementById("uploadForm").addEventListener("submit", function(e) {e.preventDefault();const formData = new FormData(this);const xhr = new XMLHttpRequest();xhr.open("POST", this.action, true);xhr.upload.addEventListener("progress", (event) => {if (event.lengthComputable) {const percent = (event.loaded / event.total) * 100;document.querySelector(".progress-bar").style.width = `${percent}%`;document.querySelector(".progress-bar").textContent = `${Math.round(percent)}%`;document.querySelector(".progress").classList.remove("d-none");}});xhr.onload = () => {if (xhr.status === 200) {alert("File uploaded successfully");} else {alert("Upload failed");}document.querySelector(".progress").classList.add("d-none");document.querySelector(".progress-bar").style.width = "0%";};xhr.send(formData);
});

---

总结

Bootstrap 提供了多种文件上传控件的实现方式，从简单的表单控件到复杂的拖拽上传和 AJAX 上传功能。你可以根据需求选择合适的方式：

• 使用默认的 Bootstrap 文件输入控件。
• 使用 Bootstrap File Input 插件实现更强大的功能。
• 自定义文件上传控件并结合 JavaScript 实现拖拽和异步上传。