Bootstrap Fileinput文件上传组件用法详解

Bootstrap Fileinput是一款基于Bootstrap的文件上传组件，可以方便地进行文件上传并对上传的文件进行一些处理。

安装

下载源码

可以从 Bootstrap Fileinput 的官方 Github 页面下载源码：https://github.com/kartik-v/bootstrap-fileinput。选择最新的稳定版进行下载。

引入文件

将 Bootstrap Fileinput 的相关文件引入到你的项目中。需要引入的文件包括bootstrap.min.css、bootstrap.min.js、fileinput.min.css和fileinput.min.js。

<!-- 引入 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">

<!-- 引入 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>

使用

基本用法

在 HTML 中添加一个文件上传框。使用 <input type="file"> 标签创建一个文件上传框，然后为其添加一个 id。

<input id="input-id" type="file" class="file" data-preview-file-type="text" />

在 JavaScript 中初始化文件上传框。在 $(document).ready(function () {}); 中调用 fileinput() 方法对文件上传框进行初始化。

$(document).ready(function() {
    $("#input-id").fileinput({});
});

这样就完成了一个简单的文件上传功能，还可以加入一些选项定制它的功能。其中 data-preview-file-type 选项用来指定文件预览类型。

高级用法

限制文件类型

只允许上传某些特定类型的文件，比如图片和 PDF 文件。可以使用 allowedFileExtensions 选项来指定可上传文件的扩展名。

$(document).ready(function() {
    $("#input-id").fileinput({
        allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
    });
});

限制文件大小

可以使用 maxFileSize 选项来指定最大文件大小（单位为 KB），如果超出限制会有错误提示。

$(document).ready(function() {
    $("#input-id").fileinput({
        maxFileSize: 2048
    });
});

实时预览

可以打开 showPreview 选项来展示图片和 PDF 文档的预览效果。

$(document).ready(function() {
    $("#input-id").fileinput({
        showPreview: true,
        allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
    });
});

可以通过 showClose 和 showRemove 选项来定制预览效果的关闭和删除按钮的显示。

$(document).ready(function() {
    $("#input-id").fileinput({
        showPreview: true,
        showClose: true,
        showRemove: true,
        allowedFileExtensions: ["jpg", "png", "gif", "pdf"]
    });
});

示例说明

示例 1

实现单文件上传功能。用户点击上传按钮，弹出文件选择框，选择完成后上传文件。上传成功后显示成功提示，上传失败后显示错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Fileinput 示例 1</title>
    <!-- 引入 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>示例 1</h1>
        <form action="upload.php" method="POST" enctype="multipart/form-data">
            <input id="input-id" name="file" type="file" class="file">
            <button id="upload" type="submit" class="btn btn-primary">上传</button>
        </form>
        <div id="response"></div>
    </div>

    <!-- 引入 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#input-id").fileinput({});
            $("#upload").click(function(e) {
                e.preventDefault();
                var formData = new FormData();
                formData.append('file', $('#input-id')[0].files[0]);
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $("#response").html("<div class='alert alert-success'>"+response+"</div>");
                    },
                    error: function(response) {
                        $("#response").html("<div class='alert alert-danger'>"+response+"</div>");
                    }
                });
            });
        });
    </script>
</body>
</html>

示例 2

展示如何限制文件类型和文件大小。用户点击上传按钮，弹出文件选择框，选择完成后进行文件类型和文件大小的限制，上传成功后显示成功提示，上传失败后显示错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Fileinput 示例 2</title>
    <!-- 引入 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>示例 2</h1>
        <form action="upload.php" method="POST" enctype="multipart/form-data">
            <input id="input-id" name="file" type="file" class="file">
            <button id="upload" type="submit" class="btn btn-primary">上传</button>
        </form>
        <div id="response"></div>
    </div>

    <!-- 引入 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#input-id").fileinput({
                allowedFileExtensions: ["jpg", "png", "gif", "pdf"],
                maxFileSize: 2048
            });
            $("#upload").click(function(e) {
                e.preventDefault();
                var formData = new FormData();
                formData.append('file', $('#input-id')[0].files[0]);
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $("#response").html("<div class='alert alert-success'>"+response+"</div>");
                    },
                    error: function(response) {
                        $("#response").html("<div class='alert alert-danger'>"+response+"</div>");
                    }
                });
            });
        });
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap Fileinput文件上传组件用法详解 - Python技术站