文件上傳控件bootstrap
一、文件準備
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查看示例。可根據示例的代碼選擇需要的控件代碼使用。
2、代碼引用
需要引用jquery
需要結合bootstrap使用,即頁面需要引入bootstrap相關js和css文件
引用fileinput.js 和css
中文需要引用js/locales/zh.js
需要主題樣式時引用themes下相關文件夾中的js和css
tips:最好以上按順序引用,免得出現莫名其妙的問題,比如zh.js必須在fileinput.js后引用否則無效
二、使用示例
1、基本用法,自動將一個普通的input框渲染成高大上的文件上傳選擇框:
<input id="f_upload" type="file" class="file" />
只需要將class設置為file即可,效果如下:
2、隱藏文件預覽窗口
<input id="input-1a" type="file" class="file" data-show-preview="false">
設置屬性:data-show-preview=“false”,等同于初始化屬性:showPreview:false
效果如下:
3、使用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
.........
三、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> ' |
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">×</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 |
7、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").
|
filereset |
|
|
fileclear |
| 點擊瀏覽框右上角X 清空文件前響應事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
filecleared |
| 點擊瀏覽框右上角X 清空文件后響應事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
fileimageuploaded |
| 在預覽框中圖片已經完全加載完畢后回調的事件
|
8、常見問題與錯誤
8.1 引入所需文件后頁面刷新查看樣式奇怪,瀏覽器提示錯誤等,可能是因為js、css文件的引用順序問題,zh.js需要在fileinput.js后面引入。bootstrap最好在fileinput前引入。
8.2 文件上傳控件在使用$("form").serializeArray()時無法直接讀取值,可以通過在文件上傳完成后(fileuploaded)給一個隱藏的input框賦值的方式獲取form值。
舉例場景:
form表單中包含文件上傳控件,需要在選擇文件后不立刻上傳,在點擊form表單提交按鈕后先上傳文件,成功后提交表單。
作者:星朝
來源鏈接:https://www.cnblogs.com/jpfss/p/9472992.html