“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技术站
微信扫一扫 
支付宝扫一扫 