Bootstrap文件上傳組件：bootstrap fileinput
阿新 • • 發佈：2018-02-03
nbut won test 預覽 styles bar swe int vertical 2、不做任何裝飾的bootstrap fileinput：（bootstrap fileinput初級進化
為了上傳預覽pdf與圖片特用此插件。
源碼以及API地址：
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
一、效果展示
1、原始的input type=‘file‘，簡直不忍直視。
2、不做任何裝飾的bootstrap fileinput：（bootstrap fileinput初級進化
3、bootstrap fileinput高級進化：中文化、可拖拽上傳、文件擴展名校驗（如果不是需要的文件，不讓上傳）
二、一個bootstrap插件:
<!DOCTYPE html> <!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - ©Kartik</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"type="text/javascript"></script> <script>window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js"><\/script>‘)</script> <script src="js/fileinput.js" type="text/javascript"></script> <!--簡體中文--> <script src="js/locales/zh.js" type="text/javascript"></script> <!--繁體中文--> <script src="js/locales/zh-TW.js" type="text/javascript"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> /***限制圖片框的大小**/ .kv-file-content { height: 160px; width: 160px !important; } .kv-preview-data { height: 90%; width: 90% !important; } </style> </head> <body> <div class="htmleaf-container"> <div class="container kv-main"> <div class="page-header"> <h2>文件上傳</h2> </div> <form enctype="multipart/form-data"> <input id="file-0a" class="file" type="file" multiple data-min-file-count="6"> <br> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </form> <form enctype="multipart/form-data"> <hr> <div class="form-group"> <input id="file-0b" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#"> </div> </form> </div> </div> </body> <script> //準備附件上傳的樣式 $("#file-0a").fileinput({ language: ‘zh‘, showUpload: true, //是否顯示上傳按鈕 allowedFileExtensions: [‘doc‘, ‘docx‘, ‘pdf‘] }); $("#file-0b").fileinput({ showPreview: true, //是否顯示預覽 uploadUrl: ‘#‘, // you must set a valid URL here else you will get an error allowedFileExtensions: [‘jpg‘, ‘png‘, ‘gif‘], showUpload: true, //是否顯示上傳按鈕 overwriteInitial: false, maxFileSize: 1000, maxFilesNum: 10, language: ‘zh‘, //allowedFileTypes: [‘image‘, ‘video‘, ‘flash‘], slugCallback: function (filename) { return filename.replace(‘(‘, ‘_‘).replace(‘]‘, ‘_‘); } }); $(".btn-warning").on(‘click‘, function () { if ($(‘#file-4‘).attr(‘disabled‘)) { $(‘#file-4‘).fileinput(‘enable‘); } else { $(‘#file-4‘).fileinput(‘disable‘); } }); $(document).ready(function () { $("#test-upload").fileinput({ ‘showPreview‘: false, ‘allowedFileExtensions‘: [‘jpg‘, ‘png‘, ‘gif‘], ‘elErrorContainer‘: ‘#errorBlock‘ }); }); </script> </html>
效果:
JS解釋:
$("#file-0b").fileinput({
showPreview: true, //是否顯示預覽
uploadUrl: ‘#‘, // you must set a valid URL here else you will get an error
allowedFileExtensions: [‘jpg‘, ‘png‘, ‘gif‘],
showUpload: true, //是否顯示上傳按鈕
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
language: ‘zh‘,
//allowedFileTypes: [‘image‘, ‘video‘, ‘flash‘],
slugCallback: function (filename) {
return filename.replace(‘(‘, ‘_‘).replace(‘]‘, ‘_‘);
}
});
定義顯示哪些按鈕。
bootstrap都有一些默認值，參考:fileinput.js
$.fn.fileinput.defaults = { language: ‘en‘, showCaption: true, showBrowse: true, showPreview: true, showRemove: true, showUpload: true, showCancel: true, showClose: true, showUploadedThumbs: true, browseOnZoneClick: false, autoReplace: false, previewClass: ‘‘, captionClass: ‘‘, mainClass: ‘file-caption-main‘, mainTemplate: null, purifyHtml: true, fileSizeGetter: null, initialCaption: ‘‘, initialPreview: [], initialPreviewDelimiter: ‘*$$*‘, initialPreviewAsData: false, initialPreviewFileType: ‘image‘, initialPreviewConfig: [], initialPreviewThumbTags: [], previewThumbTags: {}, initialPreviewShowDelete: true, removeFromPreviewOnError: false, deleteUrl: ‘‘, deleteExtraData: {}, overwriteInitial: true, layoutTemplates: defaultLayoutTemplates, previewTemplates: defaultPreviewTemplates, previewZoomSettings: defaultPreviewZoomSettings, previewZoomButtonIcons: { prev: ‘<i class="glyphicon glyphicon-triangle-left"></i>‘, next: ‘<i class="glyphicon glyphicon-triangle-right"></i>‘, toggleheader: ‘<i class="glyphicon glyphicon-resize-vertical"></i>‘, fullscreen: ‘<i class="glyphicon glyphicon-fullscreen"></i>‘, borderless: ‘<i class="glyphicon glyphicon-resize-full"></i>‘, close: ‘<i class="glyphicon glyphicon-remove"></i>‘ }, previewZoomButtonClasses: { prev: ‘btn btn-navigate‘, next: ‘btn btn-navigate‘, toggleheader: ‘btn btn-default btn-header-toggle‘, fullscreen: ‘btn btn-default‘, borderless: ‘btn btn-default‘, close: ‘btn btn-default‘ }, preferIconicPreview: false, preferIconicZoomPreview: false, allowedPreviewTypes: defaultPreviewTypes, allowedPreviewMimeTypes: null, allowedFileTypes: null, allowedFileExtensions: null, defaultPreviewContent: null, customLayoutTags: {}, customPreviewTags: {}, previewSettings: defaultPreviewSettings, fileTypeSettings: defaultFileTypeSettings, previewFileIcon: ‘<i class="glyphicon glyphicon-file"></i>‘, previewFileIconClass: ‘file-other-icon‘, previewFileIconSettings: {}, previewFileExtSettings: {}, buttonLabelClass: ‘hidden-xs‘, browseIcon: ‘<i class="glyphicon glyphicon-folder-open"></i> ‘, browseClass: ‘btn btn-primary‘, removeIcon: ‘<i class="glyphicon glyphicon-trash"></i>‘, removeClass: ‘btn btn-default‘, cancelIcon: ‘<i class="glyphicon glyphicon-ban-circle"></i>‘, cancelClass: ‘btn btn-default‘, uploadIcon: ‘<i class="glyphicon glyphicon-upload"></i>‘, uploadClass: ‘btn btn-default‘, uploadUrl: null, uploadAsync: true, uploadExtraData: {}, zoomModalHeight: 480, minImageWidth: null, minImageHeight: null, maxImageWidth: null, maxImageHeight: null, resizeImage: false, resizePreference: ‘width‘, resizeQuality: 0.92, resizeDefaultImageType: ‘image/jpeg‘, minFileSize: 0, maxFileSize: 0, maxFilePreviewSize: 25600, // 25 MB minFileCount: 0, maxFileCount: 0, validateInitialCount: false, msgValidationErrorClass: ‘text-danger‘, msgValidationErrorIcon: ‘<i class="glyphicon glyphicon-exclamation-sign"></i> ‘, msgErrorClass: ‘file-error-message‘, progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active", progressClass: "progress-bar progress-bar-success progress-bar-striped active", progressCompleteClass: "progress-bar progress-bar-success", progressErrorClass: "progress-bar progress-bar-danger", progressUploadThreshold: 99, previewFileType: ‘image‘, elCaptionContainer: null, elCaptionText: null, elPreviewContainer: null, elPreviewImage: null, elPreviewStatus: null, elErrorContainer: null, errorCloseButton: ‘<span class="close kv-error-close">×</span>‘, slugCallback: null, dropZoneEnabled: true, dropZoneTitleClass: ‘file-drop-zone-title‘, fileActionSettings: {}, otherActionButtons: ‘‘, textEncoding: ‘UTF-8‘, ajaxSettings: {}, ajaxDeleteSettings: {}, showAjaxErrorDetails: true };
三、後臺接收文件:
參考:https://www.cnblogs.com/landeanfen/p/5007400.html
http://www.cnblogs.com/wuhuacong/p/4774396.html
http://blog.csdn.net/u012526194/article/details/69937741
Bootstrap文件上傳組件：bootstrap fileinput