App下載

如何使用bootstrap-fileinput實(shí)現(xiàn)文件上傳?實(shí)現(xiàn)文件上傳的經(jīng)驗(yàn)分享!

猿友 2021-06-29 10:45:45 瀏覽數(shù) (7098)
反饋

今天我們來(lái)說(shuō)說(shuō)有關(guān)于:“如何使用bootstrap-fileinput實(shí)現(xiàn)文件上傳?”這個(gè)問(wèn)題的相關(guān)內(nèi)容,下面是小編整理的相關(guān)的資料希望對(duì)大家有所幫助。


一、準(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)插件語(yǔ)言為英文,如需要中文需要引用?js/locales/zh.js?(其他語(yǔ)言引用相應(yīng)的js文件) ?! ?/p>

js/plugins:相關(guān)輔助插件,?piexif.min.js?(resize image插件)、?sortable.js?(初始化預(yù)覽窗口縮略圖排序插件)、?purify.js?(看說(shuō)明是凈化html代碼用的,試了下沒(méi)有搞明白具體有說(shuō)明作用)?!?/p>

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?或者訪問(wèn)?http://plugins.krajee.com/file-basic-usage-demo?來(lái)進(jìn)行查看示例;還可以根據(jù)示例的代碼選擇需要的控件代碼使用。 

2、代碼引用

我們?cè)谶M(jìn)編程的時(shí)候是需要引用 jquery,而且還需要結(jié)合 bootstrap 使用,即頁(yè)面需要引入bootstrap 相關(guān) js 和 css 文件;不僅這樣我們還需要引用到相關(guān)的?fileinput.js? 和?css?,在中文中則需要引用?js/locales/zh.js?;如果有時(shí)候需要主題樣式時(shí)則要引用themes下相關(guān)文件夾中的 js 和 css。


二、使用示例

1、基本用法,通過(guò)自動(dòng)將一個(gè)普通的 ?input? 框渲染成高大上的文件上傳選擇框,代碼如下:

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

我們只需要將 class 設(shè)置為 file 即可,效果如下:

class設(shè)置<input id="f_upload" type="file" class="file" />

2、隱藏文件預(yù)覽窗口

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

當(dāng)我們?cè)O(shè)置屬性:?data-show-preview=“false”?之后就等同于初始化屬性:?showPreview:false?我們來(lái)看下效果:

效果

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)說(shuō)明

屬性名

屬性類型

描述說(shuō)明

默認(rèn)值

language

String

多語(yǔ)言設(shè)置,使用時(shí)需提前引入\locales文件夾下對(duì)應(yīng)的語(yǔ)言文件,

中文zh,引入語(yǔ)言文件必須放在fileinput.js之后

'en'

showCaption

Boolean

是否顯示被選文件的簡(jiǎn)介

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í)的請(qǐng)求路徑

''

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>&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

 

上傳文件時(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">&times;</span>'

slugCallback

String

 暫時(shí)沒(méi)有搜到說(shuō)明,調(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說(shuō)明

方法名

參數(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").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)的事件

 


總結(jié):

這就是有關(guān)于“如何使用bootstrap-fileinput實(shí)現(xiàn)文件上傳?”這個(gè)問(wèn)題的相關(guān)內(nèi)容,如果你有其他的看法和見解也可以分享出來(lái)和大家一起探討,更多有關(guān)于bootstrap相關(guān)內(nèi)容的知識(shí)我們可以在W3cschool中進(jìn)行了解學(xué)習(xí)。



0 人點(diǎn)贊