今天我們來說說有關(guān)于:“如何使用bootstrap-fileinput實(shí)現(xiàn)文件上傳?”這個(gè)問題的相關(guān)內(nèi)容,下面是小編整理的相關(guān)的資料希望對大家有所幫助。
一、準(zhǔn)備
1、首先需要準(zhǔn)備我們的插件,下載地址如下:
https://github.com/kartik-v/bootstrap-fileinput/
完成下載之后進(jìn)行壓縮文件內(nèi)容如下所示:
在文件中:
js:插件核心js代碼,我們需要引用?fileinput.min.js/fileinput.js
?即可,默認(rèn)插件語言為英文,如需要中文需要引用?js/locales/zh.js
?(其他語言引用相應(yīng)的js文件) ?! ?/p>
js/plugins:相關(guān)輔助插件,?piexif.min.js
?(resize image插件)、?sortable.js
?(初始化預(yù)覽窗口縮略圖排序插件)、?purify.js
?(看說明是凈化html代碼用的,試了下沒有搞明白具體有說明作用)。
css:插件核心css代碼,?fileinput.min.css/fileinput.css
?(核心css代碼,引用任何一個(gè))、?fileinput-rtl.min.css/fileinput-rtl.css
?(選用這組css,文件選擇框會(huì)和從右向左排列,即選擇文件等相關(guān)按鈕按鈕在左邊,文件框在右邊)。
themes:主題,如需要插件主題樣式可引用主題文件夾下的相應(yīng)?js
?和?css
?文件。
我們除了上面介紹的內(nèi)容外,我們還可以打開壓縮包中的?example/index.html
?或者訪問?http://plugins.krajee.com/file-basic-usage-demo
?來進(jìn)行查看示例;還可以根據(jù)示例的代碼選擇需要的控件代碼使用。
2、代碼引用
我們在進(jìn)編程的時(shí)候是需要引用 jquery,而且還需要結(jié)合 bootstrap 使用,即頁面需要引入bootstrap 相關(guān) js 和 css 文件;不僅這樣我們還需要引用到相關(guān)的?fileinput.js
? 和?css
?,在中文中則需要引用?js/locales/zh.js
?;如果有時(shí)候需要主題樣式時(shí)則要引用themes下相關(guān)文件夾中的 js 和 css。
二、使用示例
1、基本用法,通過自動(dòng)將一個(gè)普通的 ?input
? 框渲染成高大上的文件上傳選擇框,代碼如下:
<input id="f_upload" type="file" class="file" />
我們只需要將 class 設(shè)置為 file 即可,效果如下:
<input id="f_upload" type="file" class="file" />
2、隱藏文件預(yù)覽窗口
<input id="input-1a" type="file" class="file" data-show-preview="false">
當(dāng)我們設(shè)置屬性:?data-show-preview=“false”
?之后就等同于初始化屬性:?showPreview:false
?我們來看下效果:
3、使用 input 屬性和 data-** 屬性創(chuàng)建多樣化的文件上傳框
下面是使用相關(guān)內(nèi)容的代碼:
<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"]'>
三、option選項(xiàng)說明
屬性名 |
屬性類型 |
描述說明 |
默認(rèn)值 |
language |
String |
多語言設(shè)置,使用時(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)替換當(dāng)前圖片,設(shè)置為true時(shí),再次選擇文件, 會(huì)將當(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 |
刪除圖片時(shí)的請求路徑 |
'' |
deleteExtraData |
Object |
刪除圖片時(shí)額外傳入的參數(shù) |
{} |
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> ' |
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 |
|
上傳文件時(shí)額外傳遞的參數(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í)最小上傳的文件個(gè)數(shù) |
0 |
maxFileCount |
number |
表示允許同時(shí)上傳的最大文件個(gè)數(shù) |
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 |
預(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 |
String |
暫時(shí)沒有搜到說明,調(diào)試顯示,在文件選擇后會(huì)調(diào)到這個(gè)方法。 |
null |
dropZoneEnabled |
boolean |
是否顯示拖拽區(qū)域 |
true |
dropZoneTitleClass |
String |
拖拽區(qū)域類屬性設(shè)置 |
'file-drop-zone-title' |
fileActionSettings |
Object |
|
{} |
otherActionButtons |
String |
|
'' |
textEncoding |
String |
編碼設(shè)置 |
'UTF-8' |
ajaxSettings |
Object |
|
{} |
ajaxDeleteSettings |
Object |
|
{} |
showAjaxErrorDetails |
boolean |
|
true |
四、Method說明
方法名 |
參數(shù) |
描述 |
fileerror |
|
異步上傳錯(cuò)誤結(jié)果處理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); |
fileuploaded |
|
異步上傳成功結(jié)果處理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { }) |
filebatchuploaderror |
|
同步上傳錯(cuò)誤結(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").
|
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)的事件
|
總結(jié):
這就是有關(guān)于“如何使用bootstrap-fileinput實(shí)現(xiàn)文件上傳?”這個(gè)問題的相關(guān)內(nèi)容,如果你有其他的看法和見解也可以分享出來和大家一起探討,更多有關(guān)于bootstrap相關(guān)內(nèi)容的知識我們可以在W3cschool中進(jìn)行了解學(xué)習(xí)。