Bootstrap中的fileinput 多图片上传及编辑功能

“Bootstrap中的fileinput 多图片上传及编辑功能”是一个非常有用的功能，它可以帮助我们在页面中实现上传、删除、编辑多张图片的功能。下面我将详细讲解在Bootstrap中如何实现这个功能。

使用Bootstrap中的fileinput插件

要实现多图片上传及编辑功能，我们需要使用Bootstrap中的fileinput插件。这个插件可以将一个input元素转换成一个可触摸、可拖放、可旋转、可缩放、可裁剪、可排序的文件上传控件。以下是使用fileinput插件的基本步骤：

引入CSS和JS文件

需要在页面中引入以下CSS和JS文件：

<!--引入Bootstrap样式-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--引入fileinput样式-->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
<!--引入Jquery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--引入fileinput插件-->
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/locales/zh.min.js"></script>

其中，bootstrap.min.css是Bootstrap的样式文件，fileinput.min.css是fileinput插件的样式文件，jquery.min.js是jQuery库文件，fileinput.min.js是fileinput插件的JS文件，zh.min.js是fileinput插件的中文语言包文件。

创建input元素

<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false">

其中，id属性为该元素的ID，type="file"表示这个元素是文件上传控件，multiple表示可以选择多个文件，data-overwrite-initial="false"表示不会覆盖已有的文件。

初始化fileinput插件

$("#file-1").fileinput({
    overwriteInitial: false,
    previewFileType: "image",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxFileSize: 1024 * 10,
    maxFilesNum: 10,
    showUploadedThumbs: false,
    resizeImage: true,
    language: "zh",
    initialPreview: [
        "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>",
        "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>"
    ],
    initialPreviewConfig: [
        {caption: "image-1.jpg", size: 327360, width: "120px", url: "/images/delete", key: 1},
        {caption: "image-2.png", size: 436389, width: "120px", url: "/images/delete", key: 2}
    ]
});

其中，$("#file-1")是选择器，fileinput()是fileinput插件的初始化方法。overwriteInitial表示不能覆盖已有的文件，previewFileType表示预览文件的类型，allowedFileExtensions表示允许上传的文件类型，maxFileSize表示允许上传的文件大小，maxFilesNum表示最多可以上传的文件数量，showUploadedThumbs表示不显示已上传文件的缩略图，resizeImage表示上传图片时是否进行图片缩放，language表示语言设置，initialPreview表示预览已有的文件，initialPreviewConfig表示配置已有的文件。

多图片上传示例

以下是一个多图片上传的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多图片上传示例</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/locales/zh.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>多图片上传示例</h1>
            <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false">
        </div>
        <script>
            $("#file-1").fileinput({
                overwriteInitial: false,
                previewFileType: "image",
                allowedFileExtensions: ["jpg", "png", "gif"],
                maxFileSize: 1024 * 10,
                maxFilesNum: 10,
                showUploadedThumbs: false,
                resizeImage: true,
                language: "zh",
                initialPreview: [
                    "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>",
                    "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>"
                ],
                initialPreviewConfig: [
                    {caption: "image-1.jpg", size: 327360, width: "120px", url: "/images/delete", key: 1},
                    {caption: "image-2.png", size: 436389, width: "120px", url: "/images/delete", key: 2}
                ]
            });
        </script>
    </body>
</html>

这个示例中，我们使用了一个Bootstrap的容器(div class="container")来包含文件上传控件，并初始化了fileinput插件。可以看到，我们设置了上传文件的限制条件，包括文件大小、文件类型、文件数量等。

图片编辑功能示例

除了上传功能，fileinput插件还提供了图片编辑的功能。我们可以使用它来对上传的图片进行旋转、缩放、裁剪等操作。下面是一个图片编辑的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片编辑功能示例</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/locales/zh.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>图片编辑功能示例</h1>
            <input id="file-2" type="file" class="file" data-show-upload="false" data-show-caption="true">
        </div>
        <script>
            $("#file-2").fileinput({
                language: "zh",
                showUpload: false,
                showCaption: true,
                showRemove: true,
                browseClass: "btn btn-primary",
                allowedFileExtensions : ["jpg", "png","gif"],
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                browseLabel: "选择图片",
                initialPreviewAsData: true,
                initialPreview: [
                    "http://lorempixel.com/800/460/city/1",
                    "http://lorempixel.com/800/460/city/2"
                ],
                initialPreviewConfig: [
                    {caption: "desert.jpg", size: 930321, width: "120px", url: "/images/delete", key: 1},
                    {caption: "lighthouse.jpg", size: 1210799, width: "120px", url: "/images/delete", key: 2}
                ]
            });
        </script>
    </body>
</html>

这个示例中，我们设置了一些配置项，用于初始化fileinput插件。注意，这里的data-show-upload="false"表示不显示上传按钮，data-show-remove="true"表示显示删除按钮。

使用这个示例上传图片后，我们可以看到，在页面上会显示一张缩略图，我们可以通过点击缩略图来查看或编辑图片。点击图片后，会弹出一个模态框，里面包含了图片的编辑工具条和图片预览框。在工具条中，包含了旋转、裁剪、缩放、还原等功能。我们可以点击这些按钮来编辑图片，最后点击保存按钮来保存修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap中的fileinput 多图片上传及编辑功能 - Python技术站

Bootstrap中的fileinput 多图片上传及编辑功能

使用Bootstrap中的fileinput插件

多图片上传示例

图片编辑功能示例

相关文章