实现一个bootstrop fileinput的例子
时间: 2023-06-26 13:04:48 浏览: 45
可以参考以下代码实现一个基本的 Bootstrap Fileinput:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Fileinput Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container mt-5">
<form action="#" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="inputFile">Choose file</label>
<input id="inputFile" name="inputFile" type="file" class="file">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.min.js"></script>
<script>
$(document).ready(function() {
$("#inputFile").fileinput({
theme: 'fa',
showUpload: false,
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif']
});
});
</script>
</body>
</html>
```
在上述代码中,我们引入了 Bootstrap、jQuery 和 Bootstrap Fileinput 的 CSS 和 JS 文件,并在页面中创建了一个表单和一个文件选择器。在加载完页面后,我们使用 jQuery 的 fileinput 插件对文件选择器进行初始化,并设置了一些参数,如主题、是否显示上传按钮和允许上传的文件类型。