bootstrap-fileinput插件学习

文章参考
https://github.com/kartik-v/bootstrap-fileinput

引入文件

<link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../public/css/fileinput.min.css" />

<script type="text/javascript" src="../../public/js/jquery.js"></script>
<script type="text/javascript" src="../../public/js/bootstrap.min.js"></script>	
<script type="text/javascript" src="../../public/js/fileinput/fileinput.js"></script>
<script type="text/javascript" src="../../public/js/fileinput/zh.js"></script>

html表单内容

<div class="form-group">
	<label class="col-sm-2 control-label">轮播图片</label>
	<div class="col-sm-8">
		<!-- Allow only certain file content for preview -->
		<input id="input-ficons-3" name="myfile" multiple type="file" class="file-loading">
	</div>
</div>

js初始化

$("#input-ficons-3").fileinput({
	language: 'zh', //设置语言
	uploadUrl: "/sqh/upload",
	previewFileIcon: '<i class="fa fa-file"></i>',
	allowedPreviewTypes: ['image', 'text'], // allow only preview of image & text files

	//上传默认显示图片
//            initialPreview: [
//                "<img src='https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/5.jpg' class='file-preview-image' style='width: 100px;height:100px;' alt='Desert' title='Desert'>"
//            ],

	previewFileIconSettings: {
		'docx': '<i class="fa fa-file-word-o text-primary"></i>',
		'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
		'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
		'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
		'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
	}
});

效果图