最近有群里的网友私聊我，问我如何实现可预览的多文件上传功能。我就推荐了 Bootstrap 的 fileinput.js 插件，在这里我再整理一下它的具体用法！
fileinput.js 实现文件上传的运行效果
fileinput.js 的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Bootstrap 上传文件组件</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js" type="text/javascript"></script>
<script href="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<style>
.col-center-block {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row myCenter">
<div class="col-xs-6 col-md-6 col-center-block">
<div class="container kv-main">
<h4>Bootstrap 多文件上传实例</h4>
<form enctype="multipart/form-data">
<label>多文件预览上传实例</label>
<input id="file-select" name="file-select[]" type="file" multiple>
</form>
<hr>
<br>
</div>
</div>
</div>
</div>
</body>
<script>
$('#file-select').fileinput({
language: 'fr',
uploadUrl: '#',
allowedFileExtensions : ['jpg', 'png','gif'],
'elErrorContainer': '#errorBlock'
});
</script>
</html>
参考资料
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
： » 使用Bootstrap的fileinput插件实现多文件、多语言、可预览的上传功能
原创文章，作者：端木书台，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251191.html