Bootstrap中图片上传
在Web开发中，图片上传是一个常见需求。而Bootstrap作为目前最受欢迎的前端框架之一，拥有众多的组件，使得图片上传变得容易且美观。本文将为大家介绍Bootstrap中如何上传图片。
1. 使用Bootstrap的fileinput插件
Bootstrap提供了强大的fileinput插件，可以用于上传图片、视频等文件。该插件在使用时需要引入Bootstrap的相关CSS和JS文件，以及fileinput的JS文件。下面是一个简单的例子，用于上传图片并将其展示在页面上：
首先是HTML代码，需要使用表单控件和相应的JS代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap fileinput</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/plugins/piexif.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/plugins/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/plugins/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/themes/fa/theme.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input id="file-1" type="file" class="file" data-preview-file-type="text">
</form>
<script>
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: '/site/file-upload-single',
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
elErrorContainer: "#errorBlock",
ajaxSettings: {
dataType: 'json'
},
uploadExtraData: function() {
return {
kvId: '10'
};
}
});
</script>
</body>
</html>
其中，input标签用于创建文件上传控件，其中type="file"。需要注意的是，该控件需要设置enctype="multipart/form-data"属性，因为这个属性告诉Web服务器和浏览器要使用multipart/form-data格式来传输数据。同时，class="file"是告诉fileinput插件将此控件转换成图片上传控件。
接下来，需要在JavaScript代码中初始化fileinput插件：
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: '/site/file-upload-single',
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
elErrorContainer: "#errorBlock",
ajaxSettings: {
dataType: 'json'
},
uploadExtraData: function() {
return {
kvId: '10'
};
}
});
以上是常用的初始化参数，可以根据实际需求进行修改。可以看到，通过修改以上参数，可以实现文件扩展名限制、文件大小限制等功能。
最后就是图片的展示问题，可以通过以下代码在页面中添加图片：
<img id="image-1" src="path_to_image">
在fileinput插件上传成功后会有一个回调处理函数，可以在这个函数中进行图片的设置：
$('#file-1').on('fileuploaded', function(event, data, previewId, index) {
$('#image-1').attr('src', data.response.path);
});
以上就是使用fileinput插件实现图片上传的过程。
2. 使用表单控件实现图片上传
除了使用fileinput插件，还可以使用Bootstrap的表单控件实现图片上传。与fileinput插件不同，使用表单控件上传图片不需要引入额外的JS文件，只需要使用HTML表单元素即可。下面有一个简单的例子，文件上传后会在列表中展示出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap file upload</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<hr>
<h3>Uploaded Files:</h3>
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="path_to_image">
</a>
</div>
</div>
</body>
</html>
可以看到，与fileinput插件不同的是，表单控件没有提供过多的参数设置，只需要在input标签设置type="file"，并给表单设置enctype="multipart/form-data"，即可实现文件上传。针对上传成功后的图片展示，可以使用a标签将图片链接到页面中，并使用img标签展示图片。
小结
在本文中，我们介绍了Bootstrap中图片上传的两种方法：使用fileinput插件和使用表单控件。它们都能够实现文件上传的功能，具体使用哪种方式，取决于实际需求和项目情况。如果需要更多的设置项和功能，建议使用fileinput插件，如果只是简单的文件上传，表单控件已经足够。
关于Bootstrap的更多使用详解，请访问Bootstrap的官方文档，以获得更多信息：