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 实现拖拽和异步上传。