文件上傳控件bootstrap-fileinput的使用

1、準備

一、插件下載地址：https://github.com/kartik-v/bootstrap-fileinput/ 下載後的壓縮包解壓文件夾內容以下：

　　

 

 

        js：插件核心js代碼，引用fileinput.min.js/fileinput.js便可，默認插件語言爲英文，如須要中文須要引用js/locales/zh.js(其餘語言引用相應的js文件)

　　js/plugins:相關輔助插件，piexif.min.js（resize image插件）、sortable.js（初始化預覽窗口縮略圖排序插件）、purify.js（看說明是淨化html代碼用的，試了下沒有搞明白具體有說明做用）

　　css：插件核心css代碼，fileinput.min.css/fileinput.css（核心css代碼，引用任何一個）、fileinput-rtl.min.css/fileinput-rtl.css(選用這組css，文件選擇框會和從右向左排列，即選擇文件等相關按鈕按鈕在左邊，文件框在右邊)

　　themes:主題，如須要插件主題樣式可引用主題文件夾下的相應js和css文件

　　查看示例：

　　　　打開壓縮包中的example/index.html或者訪問http://plugins.krajee.com/file-basic-usage-demo查看示例。可根據示例的代碼選擇須要的控件代碼使用。

二、代碼引用

　　須要引用jquery

　　須要結合bootstrap使用，即頁面須要引入bootstrap相關js和css文件

　　引用fileinput.js 和css

　　中文須要引用js/locales/zh.js

　　須要主題樣式時引用themes下相關文件夾中的js和css

　　tips：最好以上按順序引用，省得出現莫名其妙的問題，好比zh.js必須在fileinput.js後引用不然無效

2、使用示例

　　一、基本用法，自動將一個普通的input框渲染成高大上的文件上傳選擇框：

<input id="f_upload" type="file" class="file" />

　　只須要將class設置爲file便可，效果以下：

 

　　二、隱藏文件預覽窗口

　　

<input id="input-1a" type="file" class="file" data-show-preview="false">

　　設置屬性：data-show-preview=「false」，等同於初始化屬性：showPreview：false

       效果以下：

　　三、使用input 屬性和data-**屬性建立多樣化的文件上傳框

　　

<input id="input-2" name="input2" type="file fileloading" class="file" multiple 
 readonly="false" disabled="false"  data-show-upload="false" data-show-caption="true" data-show-preview="true" data-allowed-file-extensions='["jpg","png"]'>

　　屬性說明：

　　　　type="file fileloading" file表示此input框將被渲染爲文件上傳控件，fileloading在選擇文件後產生預覽前會有友好的轉圈的loading提示（文件選擇多了後比較容易觀察到）

　　　　multiple：標識能夠文件多選

　　　　readonly/disabled:這個不用解釋了噻

　　       data-show-upload：等同於屬性showUpload，顯示上傳按鈕，同理有data-show-remove、data-show-cancel等詳見option

　　　　data-show-caption：顯示文件上傳的簡介

　　　　data-allowed-file-extensions：容許的文件後綴名，另外有data-allowed-file-types詳見option

　　　　.........

3、option選項說明：

屬性名	屬性類型	描述說明	默認值
language	String	多語言設置，使用時需提早引入\locales文件夾下對應的語言文件， 中文zh，引入語言文件必須放在fileinput.js以後	'en'
showCaption	Boolean	是否顯示被選文件的簡介	true
showBrowse	Boolean	是否顯示瀏覽按鈕	true
showPreview	Boolean	是否顯示預覽區域	true
showRemove	Boolean	是否顯示移除按鈕	true,
showUpload	Boolean	是否顯示上傳按鈕	true,
showCancel	Boolean	是否顯示取消按鈕	true,
showClose:	Boolean	是否顯示關閉按鈕	true
showUploadedThumbs	Boolean		true
browseOnZoneClick	Boolean		false
autoReplace	Boolean	是否自動替換當前圖片，設置爲true時，再次選擇文件， 會將當前的文件替換掉。	false
generateFileId	Object		null
previewClass	String	添加預覽按鈕的類屬性	‘’
captionClass	String		‘’
frameClass	String		'krajee-default'
mainClass	String		'file-caption-main'
mainTemplate	Object		null
purifyHtml	Boolean		true
fileSizeGetter	Object		null
initialCaption	String		''
initialPreview	Array/Object		[]
initialPreviewDelimiter	String		'*$$*'
initialPreviewAsData	Boolean		false
initialPreviewFileType	String		'image'
initialPreviewConfig	Array/Object		[]
initialPreviewThumbTags	Array/Object		[]
previewThumbTags	Object		{}
initialPreviewShowDelete	Boolean		true
removeFromPreviewOnError	Boolean		false
deleteUrl	String	刪除圖片時的請求路徑	''
deleteExtraData	Object	刪除圖片時額外傳入的參數	{}
overwriteInitial	Boolean		true
previewZoomButtonIcons	Object		{ 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	Object		{  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	Boolrean		false
preferIconicZoomPreview	Boolrean		false
allowedPreviewTypes	undefined		undefined
allowedPreviewMimeTypes	Object		null
allowedFileTypes	Object	接收的文件後綴，如['jpg', 'gif', 'png'],不填將不限制上傳文件後綴類型	null
allowedFileExtensions	Object		null
defaultPreviewContent	Object		null
customLayoutTags	Object		{}
customPreviewTags	Object		{}
previewFileIcon	String		'<i class="glyphicon glyphicon-file"></i>'
previewFileIconClass	String		'file-other-icon'
previewFileIconSettings	Object		{}
previewFileExtSettings	Object		{}
buttonLabelClass	String		'hidden-xs'
browseIcon	String		'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;'
browseClass	String		'btn btn-primary'
removeIcon	String		'<i class="glyphicon glyphicon-trash"></i>'
removeClass	String		'btn btn-default'
cancelIcon	String		'<i class="glyphicon glyphicon-ban-circle"></i>'
cancelClass	String		'btn btn-default'
uploadIcon	String		'<i class="glyphicon glyphicon-upload"></i>'
uploadClass	String		'btn btn-default'
uploadUrl	String	上傳文件路徑	null
uploadAsync	boolean	是否爲異步上傳	true
uploadExtraData		上傳文件時額外傳遞的參數設置	{}
zoomModalHeight	number		480
minImageWidth	String	圖片的最小寬度	null
minImageHeight	String	圖片的最小高度	null
maxImageWidth	String	圖片的最大寬度	null
maxImageHeight	String	圖片的最大高度	null
resizeImage	boolean		false
resizePreference	String		'width'
resizeQuality	number		0.92
resizeDefaultImageType	String		'image/jpeg'
minFileSize	number	單位爲kb，上傳文件的最小大小值	0
maxFileSize	number	單位爲kb，若是爲0表示不限制文件大小	0
resizeDefaultImageType	number		25600(25MB)
minFileCount	number	表示同時最小上傳的文件個數	0
maxFileCount	number	表示容許同時上傳的最大文件個數	0
validateInitialCount	boolean		false
msgValidationErrorClass	String		'text-danger'
msgValidationErrorIcon	String		'<i class="glyphicon glyphicon-exclamation-sign"></i> '
msgErrorClass	String		'file-error-message'
progressThumbClass	String		"progress-bar progress-bar-success progress-bar-striped active"
rogressClass	String		"progress-bar progress-bar-success progress-bar-striped active"
progressCompleteClass	String		"progress-bar progress-bar-success"
progressErrorClass	String		"progress-bar progress-bar-danger"
progressUploadThreshold	number		99
previewFileType	String	預覽文件類型,內置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式	'image'
elCaptionContainer	String		null
elCaptionText	String	設置標題欄提示信息	null
elPreviewContainer	String		null
elPreviewImage	String		null
elPreviewStatus	String		null
elErrorContainer	String		null
errorCloseButton	String		'<span class="close kv-error-close">&times;</span>'
slugCallback	String	暫時沒有搜到說明，調試顯示，在文件選擇後會調到這個方法。	null
dropZoneEnabled	boolean	是否顯示拖拽區域	true
dropZoneTitleClass	String	拖拽區域類屬性設置	'file-drop-zone-title'
fileActionSettings	Object		{}
otherActionButtons	String		''
textEncoding	String	編碼設置	'UTF-8'
ajaxSettings	Object		{}
ajaxDeleteSettings	Object		{}
showAjaxErrorDetails	boolean		true

七、Method說明：

方法名	參數	描述
fileerror		異步上傳錯誤結果處理 $('#uploadfile').on('fileerror', function(event, data, msg) { });
fileuploaded		異步上傳成功結果處理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { })
filebatchuploaderror		同步上傳錯誤結果處理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { });
filebatchuploadsuccess		同步上傳成功結果處理 $('#uploadfile').on('filepreupload', function(event, data, previewId, index) {     });
filebatchselected		選擇文件後處理事件 $("#fileinput").on("filebatchselected", function(event, files) { });
upload		文件上傳方法 $("#fileinput").fileinput("upload");
fileuploaded		上傳成功後處理方法 $("#fileinput").on("fileuploaded", function(event, data, previewId, index) { });
filereset
fileclear		點擊瀏覽框右上角X 清空文件前響應事件 $("#fileinput").on("fileclear",function(event, data, msg){ });
filecleared		點擊瀏覽框右上角X 清空文件後響應事件 $("#fileinput").on("filecleared",function(event, data, msg){ });
fileimageuploaded		在預覽框中圖片已經徹底加載完畢後回調的事件

八、常見問題與錯誤

     8.1 引入所需文件後頁面刷新查看樣式奇怪，瀏覽器提示錯誤等，多是由於js、css文件的引用順序問題，zh.js須要在fileinput.js後面引入。bootstrap最好在fileinput前引入。

     8.2 文件上傳控件在使用$("form").serializeArray()時沒法直接讀取值，能夠經過在文件上傳完成後（fileuploaded）給一個隱藏的input框賦值的方式獲取form值。

　　　　舉例場景：

　　　　　　form表單中包含文件上傳控件，須要在選擇文件後不馬上上傳，在點擊form表單提交按鈕後先上傳文件，成功後提交表單。