Bootstrap FileInput实现图片上传功能
本文实例为大家分享了Bootstrap FileInput实现图片上传功能的具体代码，供大家参考，具体内容如下 html代码： <div class="form-group"> <label class="col-sm-2 control-label">图片</label> <div class="col-sm-8"> <input id="filesInput" type="file" multiple data-browse-on-zone-click="true" class="file-loading" ac
### JavaScript与Bootstrap FileInput 实现图片上传功能
在现代Web开发中，图片上传是一个非常常见的需求，尤其是在构建具有用户交互性的网站时。本篇将详细解析如何利用Bootstrap FileInput插件结合JavaScript实现这一功能。
#### Bootstrap FileInput简介
Bootstrap FileInput是一款基于Bootstrap框架的文件输入控件插件，它可以为HTML5的`<input type="file">`标签提供丰富的定制选项，如预览、上传进度条、多文件选择等。通过这个插件，开发者可以轻松地添加美观且功能强大的文件上传界面到网页中。
#### 实现步骤详解
##### 1. HTML结构
我们需要设置HTML表单中的元素。以下是一个基本的例子：
```html
<div class="form-group">
<label class="col-sm-2 control-label">图片</label>
<div class="col-sm-8">
<input id="filesInput" type="file" multiple data-browse-on-zone-click="true" class="file-loading" accept="image/*"/>
<input id="resources" name="resources" th:value="${record.picUrls}" type="hidden">//用于存储上传后的图片路径
</div>
</div>
```
这里的关键是`<input type="file">`元素，它允许用户选择多个图像文件进行上传。`multiple`属性允许选择多个文件，而`accept`属性限制只能选择图像类型的文件。
##### 2. 引入必要的CSS和JS文件
为了使用Bootstrap FileInput，我们需要引入相关的CSS和JS文件：
```html
<!-- CSS -->
<link href="/ajax/libs/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
<!-- JS -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.js}"></script>
```
这里我们分别引入了Bootstrap的核心库以及jQuery和Bootstrap FileInput的JS文件。这些文件的正确加载顺序对于确保插件能够正常工作至关重要。
##### 3. JavaScript配置与事件处理
接下来是核心部分——JavaScript配置和事件处理：
```javascript
var List = new Array(); // 用于存储文件名和ID的全局变量
$(function() {
var picStr = [
"http:",
"http:."
];
var picStrConfig = [
{caption: "11111", width: "120px", fileid: "123456", url: "deleteData", type: "image", key: "1"},
// ...
];
$('#filesInput').fileinput({
theme: 'fas',
language: 'zh',
uploadUrl: ctx + 'bike/record/uploadData', // 图片上传的后端接口地址
uploadAsync: true, // 默认异步上传
showUpload: true, // 是否显示上传按钮
overwriteInitial: false,
showRemove: false, // 显示移除按钮
showCaption: false, // 是否显示标题
browseClass: "btn btn-primary", // 按钮样式
dropZoneEnabled: false, // 是否显示拖拽区域
maxFileCount: 5, // 允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
layoutTemplates: { actionUpload: '' },
maxFilesNum: 5,
fileType: "any",
allowedPreviewTypes: ['image'],
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
initialPreviewAsData: true,
initialPreview: picStr, // 初始化回显图片路径
initialPreviewConfig: picStrConfig // 配置预览中的一些参数
}).on("fileuploaded", function(event, data, previewId, index) {
var response = data.response;
var filePath = data.response.filePath; // 文件上传成功返回的文件名
List.push({ FileName: filePath, KeyID: previewId });
// 更新隐藏域中的值
var resources = $('#resources').val();
if (!resources) {
$("#resources").val(filePath);
} else {
$("#resources").val(resources + ',' + filePath); // 追加新的图片路径
}
});
});
```
这段代码主要实现了以下几个功能：
- **配置FileInput**: 设置主题、语言、上传URL等。
- **事件监听**: 当文件上传完成后触发`fileuploaded`事件，此时可以通过事件对象获取到服务器响应的数据（如上传成功的文件路径），并将其存储到全局变量`List`中。
- **更新隐藏域**: 在上传完成后，还需要更新隐藏的`<input>`元素的值，以便于在后续的操作中获取已上传的图片路径。
#### 总结
通过上述步骤，我们可以利用Bootstrap FileInput插件结合JavaScript轻松实现图片上传功能，并支持预览、上传进度等功能。这对于提高用户体验和简化前端开发工作量都大有裨益。此外，还可以根据实际需求进一步扩展和优化，例如增加文件大小限制、格式验证等功能。
