下載地址、API和DOM地址（英語好的小伙伴可以看看）

下載地址：https://github.com/kartik-v/bootstrap-fileinput
API文檔 ：http://plugins.krajee.com/file-input
D E M O：http://plugins.krajee.com/file-input/demo

---

做項(xiàng)目用到bootstrap fileinput插件上傳文件，在用的過程中，遇到一些問題，所以想著整理一份比較詳細(xì)的文檔，方便自己今后使用，也希望能給大家?guī)韼椭?#xff0c;如有錯誤，希望大家積極指正，積極交流。
注意：第三部分內(nèi)容因?yàn)榇嬖趇標(biāo)簽，某些文字被轉(zhuǎn)換成圖標(biāo)

一、引入文件

<link href="../css/bootstrap.min.css"rel="stylesheet">
<link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />
<scriptsrc="../js/jquery-2.0.3.min.js"></script>
<script src="../js/fileinput.js"type="text/javascript"></script>
<script src="../js/bootstrap.min.js"type="text/javascript"></script>

二、初始化設(shè)置

//初始化fileinput initFileInput(); function initFileInput() {$("#uploadImg").fileinput({language: 'zh', //設(shè)置語言dropZoneTitle: '可以將圖片拖放到這里 …支持多文件上傳',uploadUrl: "index.php", //上傳的地址uploadExtraData: function(previewId, index) { //該插件可以向您的服務(wù)器方法發(fā)送附加數(shù)據(jù)。這可以通過uploadExtraData在鍵值對中設(shè)置為關(guān)聯(lián)數(shù)組對象來完成。所以如果你有設(shè)置uploadExtraData={id:'kv-1'}，在PHP中你可以讀取這些數(shù)據(jù)$_POST['id']var id = $('#id').val();return {seriesId: id};},allowedFileExtensions: ['jpg','png'],//接收的文件后綴uploadAsync: true, //默認(rèn)異步上傳showUpload: true, //是否顯示上傳按鈕showRemove: true, //顯示移除按鈕showPreview: true, //是否顯示預(yù)覽showCancel:true, //是否顯示文件上傳取消按鈕。默認(rèn)為true。只有在AJAX上傳過程中，才會啟用和顯示showCaption: true,//是否顯示文件標(biāo)題，默認(rèn)為truebrowseClass: "btn btn-primary", //文件選擇器/瀏覽按鈕的CSS類。默認(rèn)為btn btn-primarydropZoneEnabled: true,//是否顯示拖拽區(qū)域minImageWidth: 50, //圖片的最小寬度minImageHeight: 50,//圖片的最小高度maxImageWidth: 1000,//圖片的最大寬度maxImageHeight: 1000,//圖片的最大高度maxFileSize: 1024,//單位為kb，如果為0表示不限制文件大小minFileCount: 1, //每次上傳允許的最少文件數(shù)。如果設(shè)置為0，則表示文件數(shù)是可選的。默認(rèn)為0maxFileCount: 0, //每次上傳允許的最大文件數(shù)。如果設(shè)置為0，則表示允許的文件數(shù)是無限制的。默認(rèn)為0previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//當(dāng)檢測到用于預(yù)覽的不可讀文件類型時，將在每個預(yù)覽文件縮略圖中顯示的圖標(biāo)。默認(rèn)為<i class="glyphicon glyphicon-file"></i> layoutTemplates:{actionUpload:''//去除上傳預(yù)覽縮略圖中的上傳圖片actionZoom:'', //去除上傳預(yù)覽縮略圖中的查看詳情預(yù)覽的縮略圖標(biāo)actionDownload:'' //去除上傳預(yù)覽縮略圖中的下載圖標(biāo)actionDelete:'', //去除上傳預(yù)覽的縮略圖中的刪除圖標(biāo)},//對象用于渲染布局的每個部分的模板配置。您可以設(shè)置以下模板來控制窗口小部件布局.eg:去除上傳圖標(biāo)msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",//字符串，當(dāng)文件數(shù)超過設(shè)置的最大計數(shù)時顯示的消息 maxFileCount。默認(rèn)為：選擇上傳的文件數(shù)（{n}）超出了允許的最大限制{m}。請重試您的上傳！}).on('filebatchpreupload', function(event, data) { //該方法將在上傳之前觸發(fā)var id = $('#id option:selected').val();if(id == 0){return {message: "請選擇", // 驗(yàn)證錯誤信息在上傳前要顯示。如果設(shè)置了這個設(shè)置，插件會在調(diào)用時自動中止上傳，并將其顯示為錯誤消息。您可以使用此屬性來讀取文件并執(zhí)行自己的自定義驗(yàn)證data:{} // any other data to send that can be referred in `filecustomerror`};}}); } //fileuploaded此事件僅針對ajax上傳觸發(fā)，并在每個縮略圖文件上傳完成后觸發(fā)。此事件僅針對ajax上傳并在以下情況下觸發(fā)：當(dāng)點(diǎn)擊每個預(yù)覽縮略圖中的上傳圖標(biāo)并且文件上傳成功時，或者當(dāng)你有 uploadAsync設(shè)置為true您已觸發(fā)批量上傳。在這種情況下，fileuploaded每一個人選擇的文件被上傳成功后，觸發(fā)事件。 var id_str = ''; $('#uploadImg').on('fileuploaded', function(event, data, previewId, index) {if(typeof(data.response.id) != 'undefined'){id_str = id_str+data.response.id+',';} }); // filebatchuploadcomplete此事件僅在ajax上傳和完成同步或異步ajax批量上傳后觸發(fā)。 $('#uploadImg').on('filebatchuploadcomplete',function (event,files,extra) {if(id_str.length == 0){layer.msg('上傳失敗', {icon: 0});//彈框提示return false;}setTimeout(function(){ //執(zhí)行延時關(guān)閉closeSelf();},1000); });

三、Options 說明

屬性名屬性類型描述說明默認(rèn)值

language	String	多語言設(shè)置，使用時需提前引入locales文件夾下對應(yīng)的語言文件，中文zh，引入語言文件必須放在fileinput.js之后	'en'
showCaption	Boolean	是否顯示被選文件的簡介	true
showBrowse	Boolean	是否顯示瀏覽按鈕	true
showPreview	Boolean	是否顯示預(yù)覽區(qū)域	true
showRemove	Boolean	是否顯示移除按鈕	true,
showUpload	Boolean	是否顯示上傳按鈕	true,
showCancel	Boolean	是否顯示取消按鈕	true,
showClose:	Boolean	是否顯示關(guān)閉按鈕	true
showUploadedThumbs	Boolean	?	true
browseOnZoneClick	Boolean	?	false
autoReplace	Boolean	是否自動替換當(dāng)前圖片，設(shè)置為true時，再次選擇文件， 會將當(dāng)前的文件替換掉。	false
generateFileId	Object	?	null
previewClass	String	添加預(yù)覽按鈕的類屬性	‘’
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	刪除圖片時額外傳入的參數(shù)	{}
overwriteInitial	Boolean	?	true
previewZoomButtonIcons	Object	?	{prev: '',next: '',toggleheader: '',fullscreen: '',borderless: '',close: ''},
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	?	''
previewFileIconClass	String	?	'file-other-icon'
previewFileIconSettings	Object	?	{}
previewFileExtSettings	Object	?	{}
buttonLabelClass	String	?	'hidden-xs'
browseIcon	String	?	'?'
browseClass	String	?	'btn btn-primary'
removeIcon	String	?	''
removeClass	String	?	'btn btn-default'
cancelIcon	String	?	''
cancelClass	String	?	'btn btn-default'
uploadIcon	String	?	''
uploadClass	String	?	'btn btn-default'
uploadUrl	String	上傳文件路徑	null
uploadAsync	boolean	是否為異步上傳	true
uploadExtraData	?	上傳文件時額外傳遞的參數(shù)設(shè)置	{}
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	表示同時最小上傳的文件個數(shù)	0
maxFileCount	number	表示允許同時上傳的最大文件個數(shù)	0
validateInitialCount	boolean	?	false
msgValidationErrorClass	String	?	'text-danger'
msgValidationErrorIcon	String	?	' '
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	預(yù)覽文件類型,內(nèi)置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式	'image'
elCaptionContainer	String	?	null
elCaptionText	String	設(shè)置標(biāo)題欄提示信息	null
elPreviewContainer	String	?	null
elPreviewImage	String	?	null
elPreviewStatus	String	?	null
elErrorContainer	String	?	null
errorCloseButton	String	?	'<span class="close kv-error-close">×</span>'
slugCallback	function	選擇后未上傳前 回調(diào)方法	null
dropZoneEnabled	boolean	是否顯示拖拽區(qū)域	true
dropZoneTitleClass	String	拖拽區(qū)域類屬性設(shè)置	'file-drop-zone-title'
fileActionSettings	Object	設(shè)置預(yù)覽圖片的顯示樣式	{showRemove: true,showUpload: false,showZoom: true,showDrag: true,removeIcon: '',removeClass: 'btn btn-xs btn-default',removeTitle: 'Remove file',uploadIcon: '',uploadClass: 'btn btn-xs btn-default',uploadTitle: 'Upload file',zoomIcon: '',zoomClass: 'btn btn-xs btn-default',zoomTitle: 'View Details',dragIcon: '',dragClass: 'text-info',dragTitle: 'Move / Rearrange',dragSettings: {},indicatorNew: '',indicatorSuccess: '',indicatorError: '',indicatorLoading: '',indicatorNewTitle: 'Not uploaded yet',indicatorSuccessTitle: 'Uploaded',indicatorErrorTitle: 'Upload Error',indicatorLoadingTitle: 'Uploading ...'}
otherActionButtons	String	?	''
textEncoding	String	編碼設(shè)置	'UTF-8'
ajaxSettings	Object	?	{}
ajaxDeleteSettings	Object	?	{}
showAjaxErrorDetails	boolean	?	true

四、提示說明設(shè)置

屬性名默認(rèn)值中文

fileSingle	file	文件
filePlural	files	個文件
browseLabel	Browse &hellip	選擇 …
removeLabel	Remove	移除
removeTitle	Clear selected files	清除選中文件
cancelLabel	Cancel	取消
cancelTitle	Abort ongoing upload	取消進(jìn)行中的上傳
uploadLabel	Upload	上傳
uploadTitle	Upload selected files	上傳選中文件
msgNo	No	沒有
msgNoFilesSelected	No files selected	“”
msgCancelled	Cancelled	取消
msgZoomModalHeading	Detailed Preview	詳細(xì)預(yù)覽
msgSizeTooSmall	File "{name}" ({size} KB) is too small and must be larger than {minSize} KB.	File "{name}" ({size} KB) is too small and must be larger than {minSize} KB.
msgSizeTooLarge	File "{name}" ({size} KB) exceeds maximum allowed upload size of {maxSize} KB.	文件 "{name}" ({size} KB) 超過了允許大小 {maxSize} KB.
msgFilesTooLess	You must select at least {n} {files} to upload.	你必須選擇最少 {n} {files} 來上傳.
msgFilesTooMany	Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}.	選擇的上傳文件個數(shù) ({n}) 超出最大文件的限制個數(shù) {m}.
msgFileNotFound	File "{name}" not found!	文件 "{name}" 未找到!
msgFileSecured	Security restrictions prevent reading the file "{name}".	安全限制，為了防止讀取文件 "{name}".
msgFileNotReadable	File "{name}" is not readable.	文件 "{name}" 不可讀.
msgFilePreviewAborted	File preview aborted for "{name}".	取消 "{name}" 的預(yù)覽.
msgFilePreviewError	An error occurred while reading the file "{name}".	讀取 "{name}" 時出現(xiàn)了一個錯誤.
msgInvalidFileName	Invalid or unsupported characters in file name "{name}".	Invalid or unsupported characters in file name "{name}".
msgInvalidFileType	Invalid type for file "{name}". Only "{types}" files are supported.	不正確的類型 "{name}". 只支持 "{types}" 類型的文件.
msgInvalidFileExtension	Invalid extension for file "{name}". Only "{extensions}" files are supported.	不正確的文件擴(kuò)展名 "{name}". 只支持 "{extensions}" 的文件擴(kuò)展名.
msgFileTypes	{'image': 'image','html': 'HTML','text': 'text','video': 'video','audio': 'audio','flash': 'flash','pdf': 'PDF','object': 'object'},	{'image': 'image','html': 'HTML','text': 'text','video': 'video','audio': 'audio','flash': 'flash','pdf': 'PDF','object': 'object'},
msgUploadAborted	The file upload was aborted	該文件上傳被中止
msgUploadThreshold	Processing...	Processing...
msgUploadBegin	Initializing...	Initializing...
msgUploadEnd	Done	Done
msgUploadEmpty	No valid data available for upload.	No valid data available for upload.
msgValidationError	Validation Error	驗(yàn)證錯誤
msgLoading	Loading file {index} of {files} …	加載第 {index} 文件 共 {files} …
msgProgress	Loading file {index} of {files} - {name} - {percent}% completed.	加載第 {index} 文件 共 {files} - {name} - {percent}% 完成.
msgSelected	{n} {files} selected	{n} {files} 選中
msgFoldersNotAllowed	Drag & drop files only! {n} folder(s) dropped were skipped.	只支持拖拽文件! 跳過 {n} 拖拽的文件夾.
msgImageWidthSmall	Width of image file "{name}" must be at least {size} px.	寬度的圖像文件的"{name}"的必須是至少{size}像素.
msgImageHeightSmall	Height of image file "{name}" must be at least {size} px.	圖像文件的"{name}"的高度必須至少為{size}像素.
msgImageWidthLarge	Width of image file "{name}" cannot exceed {size} px.	寬度的圖像文件"{name}"不能超過{size}像素.
msgImageHeightLarge	Height of image file "{name}" cannot exceed {size} px.	圖像文件"{name}"的高度不能超過{size}像素.
msgImageResizeError	Could not get the image dimensions to resize.	無法獲取的圖像尺寸調(diào)整。
msgImageResizeException	Error while resizing the image.<pre>{errors}</pre>	錯誤而調(diào)整圖像大小。<pre>{errors}</pre>
msgAjaxError	Something went wrong with the {operation} operation. Please try again later!	Something went wrong with the {operation} operation. Please try again later!
msgAjaxProgressError	{operation} failed	{operation} failed
ajaxOperations	{deleteThumb: 'file delete', uploadThumb: 'file upload', uploadBatch: 'batch file upload', uploadExtra: 'form data upload' },	{deleteThumb: 'file delete',uploadThumb: 'file upload', uploadBatch: 'batch file upload',uploadExtra: 'form data upload'},
dropZoneTitle	Drag & drop files here …	拖拽文件到這里 … 支持多文件同時上傳
dropZoneClickTitle	(or click to select {files})	(或點(diǎn)擊{files}按鈕選擇文件)
previewZoomButtonTitles	{prev: 'View previous file',next: 'View next file', toggleheader: 'Toggle header',fullscreen: 'Toggle full screen', borderless: 'Toggle borderless mode', close: 'Close detailed preview' }	{ prev: '預(yù)覽上一個文件',next: '預(yù)覽下一個文件',toggleheader: '縮放', fullscreen: '全屏', borderless: '無邊界模式',close: '關(guān)閉當(dāng)前預(yù)覽'}
fileActionSettings	?	{ removeTitle: '刪除文件',uploadTitle: '上傳文件',zoomTitle: '查看詳情',dragTitle: '移動 / 重置',indicatorNewTitle: '沒有上傳', indicatorSuccessTitle: '上傳',indicatorErrorTitle: '上傳錯誤', indicatorLoadingTitle: '上傳 ...'},

五、Method說明

方法名描述

fileerror	異步上傳錯誤結(jié)果處理$('#uploadfile').on('fileerror', function(event, data, msg) {});
fileuploaded	異步上傳成功結(jié)果處理$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {})
filebatchuploaderror	批量上傳錯誤結(jié)果處理$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {});
filebatchuploadsuccess	批量上傳成功結(jié)果處理$('#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	點(diǎn)擊瀏覽框右上角X 清空文件前響應(yīng)事件$("#fileinput").on("fileclear",function(event, data, msg){});
filecleared	點(diǎn)擊瀏覽框右上角X 清空文件后響應(yīng)事件$("#fileinput").on("filecleared",function(event, data, msg){});
fileimageuploaded	在預(yù)覽框中圖片已經(jīng)完全加載完畢后回調(diào)的事件

轉(zhuǎn)載地址：https://segmentfault.com/a/1190000018477200

總結(jié)

以上是生活随笔為你收集整理的Bootstrap FileInput(文件上传)中文API整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。