1. 程式人生 > >bootstrap-fileinput外掛學習

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>',
	}
});


效果圖