bootstrap-fileinput外掛學習
阿新 • • 發佈:2018-11-02
文章參考
https://github.com/kartik-v/bootstrap-fileinput
引入檔案
html表單內容
js初始化
效果圖
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>', } });
效果圖