bootstrap-fileinput使用配置

時間 2019-11-24

標籤 bootstrap fileinput 使用配置欄目 Bootstarp 简体版

原文原文鏈接

由於bootstrap是基於jquery的,所以,引用插件前,應先引入bootstrap.css, jquery.js(要求bootstrap的版本在3以上).
引入fileinput 的必須文件: bootstrap-fileinput.css, bootstrap-fileinput.js (這是官方文檔英文 )
htm 結構

<div class="content">
      <input multiple class="" id="uploadFile5" type="file" value="選擇圖片">
</div>

注:控件生產的結構都會在content容器中這效果圖css

控件初始化和基本配置:

$(".content").fileinput(  language: 'en',
        showCaption: true,
        showBrowse: true,
        showPreview: true,
        showRemove: true,
        showUpload: true,
        showCancel: true,
        showClose: true,
        showUploadedThumbs: true,
        browseOnZoneClick: false,
        autoReplace: false,
        generateFileId: null,
        previewClass: '',
        captionClass: '',
        frameClass: 'krajee-default',
        mainClass: 'file-caption-main',
        mainTemplate: null,
        purifyHtml: true,
        fileSizeGetter: null,
        initialCaption: '',
        initialPreview: [],
        initialPreviewDelimiter: '*$$*',
        initialPreviewAsData: false,
        initialPreviewFileType: 'image',
        initialPreviewConfig: [],
        initialPreviewThumbTags: [],
        previewThumbTags: {},
        initialPreviewShowDelete: true,
        removeFromPreviewOnError: false,
        deleteUrl: '',
        deleteExtraData: {},
        overwriteInitial: true,
        previewZoomButtonIcons: {
            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: {
            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: false,
        preferIconicZoomPreview: false,
        allowedPreviewTypes: undefined,
        allowedPreviewMimeTypes: null,
        allowedFileTypes: null,
        allowedFileExtensions: null,
        defaultPreviewContent: null,
        customLayoutTags: {},
        customPreviewTags: {},
        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
        previewFileIconClass: 'file-other-icon',
        previewFileIconSettings: {},
        previewFileExtSettings: {},
        buttonLabelClass: 'hidden-xs',
        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
        browseClass: 'btn btn-primary',
        removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
        removeClass: 'btn btn-default',
        cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
        cancelClass: 'btn btn-default',
        uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
        uploadClass: 'btn btn-default',
        uploadUrl: null,
        uploadAsync: true,
        uploadExtraData: {},
        zoomModalHeight: 480,
        minImageWidth: null,
        minImageHeight: null,
        maxImageWidth: null,
        maxImageHeight: null,
        resizeImage: false,
        resizePreference: 'width',
        resizeQuality: 0.92,
        resizeDefaultImageType: 'image/jpeg',
        resizeIfSizeMoreThan: 0, // in KB
        minFileSize: 0,
        maxFileSize: 0,
        maxFilePreviewSize: 25600, // 25 MB
        minFileCount: 0,
        maxFileCount: 0,
        validateInitialCount: false,
        msgValidationErrorClass: 'text-danger',
        msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
        msgErrorClass: 'file-error-message',
        progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active",
        progressClass: "progress-bar progress-bar-success progress-bar-striped active",
        progressCompleteClass: "progress-bar progress-bar-success",
        progressErrorClass: "progress-bar progress-bar-danger",
        progressUploadThreshold: 99,
        previewFileType: 'image',
        elCaptionContainer: null,
        elCaptionText: null,
        elPreviewContainer: null,
        elPreviewImage: null,
        elPreviewStatus: null,
        elErrorContainer: null,
        errorCloseButton: '<span class="close kv-error-close">&times;</span>',
        slugCallback: null,
        dropZoneEnabled: true,
        dropZoneTitleClass: 'file-drop-zone-title',
        fileActionSettings: {},
        otherActionButtons: '',
        textEncoding: 'UTF-8',
        ajaxSettings: {},
        ajaxDeleteSettings: {},
        showAjaxErrorDetails: true
    };

//這是插件中的全部的配置選項及其默認值.
//下面是經常使用的幾個配置項
/*{
            language: 'zh',                      //語言格式(默認爲英文,若設置爲中文或其餘語言,需引入語言js)
            uploadUrl: 'url',
            allowedFileExtensions: [],//接收的文件後綴
            showUpload: true, //是否顯示上傳按鈕
            showCaption: true,                 //是否顯示標題(即文件名稱)  
            showPreview: true,                 //是否顯示拖拽區
            maxFileCount: 0, //表示容許同時上傳的最大文件個數
            uploadExtraData:, //向後臺傳遞的參數
            showAjaxErrorDetails: false,         //上傳失敗後,是否顯示返回的信息
            ajaxSettings:{             //配置回調函數
           beforeSend: fnBefore,
                success: fnSuccess,
                complete: fnComplete,
                error: fnError
            }
}*/
)

此時,基本功能都已有,接下來就是根據本身的需求對其進行更進一步的配置html

提交過程當中的經常使用事件和jQuery中的很接近,有filereset, fileclear, filecleared, fileloaded, and fileerror.(能夠像jquery中那樣,書寫註冊事件,由於函數返回的仍是控件自己,因此能夠鏈式調用)jquery
支持的各類文件類型,內置的類型有: image, text, html, video, audio, flash, object, and other.git
預覽文件的默認類型有:['image', 'html', 'text', 'video', 'audio', 'flash', 'object']github

你能夠自定義,如 allowedPreviewTypes: ['images','html'] 注:當將allowedPreviewTypes: 設置爲 null,空,或者false時,預覽圖將都是相同的一個小圖標.ajax
自定義預覽圖的大小(寬和高,下面是插件默認的值) 如:previewSettings:{ image: {width: "auto", height: "160px"}, html: {width: "213px", height: "160px"}, text: {width: "213px", height: "160px"}, video: {width: "auto", height: "100%", 'max-width': "100%"}, audio: {width: "100%", height: "30px"}, flash: {width: "auto", height: "100%", 'max-width': "100%"}, object: {height: "100%"}, pdf: {width: "160px", height: "160px"}, other: {width: "160px", height: "160px"}}數據庫
提交方式有兩種 ;表單提交和基於ajax的提交 (Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.) 若想要使用ajax上傳文件,必須設置uploadUrl屬性,不然將默認使用form表單提交:json
```
uploadUrl:'個人url地址'
```
返回的數據應爲json類型bootstrap
上傳類型:上傳異步仍是同步(默認是異步):緩存

uploadAsync :true 異步時每一個文件發送一次ajax;同步上傳時,ajax只觸發一次
傳遞參數的方法:傳遞參數,有兩種方式:

a.初始化時就肯定數據:uploadExtraData:{id:1}

b.動態獲取參數並傳遞:

第一步,方法外定義參數:

var  mydata

第二步,配置中:

uploadExtraData: function () {
            	return mydata
        	},

第三步,

$(".fileinput").on("filepreajax", function (event, data) {
   uploadExtraData ={
      	 id:$(".someInput").val()   //此時能夠動態獲取
     };
})

minImageHeight,maxImageHeight,minImageWidth,maxImageWidth:

對上傳圖片的寬高進行限制(px爲單位); minFileSize ,maxFileSize 對上傳文件的大小進行限制(kb爲單位)
經常使用函數配置(推薦使用插件的回調函數): change , fileselect ,filereset, fileclear, filecleared, fileloaded, fileerror 和jquery的回調函數很像,依次是: 文件選中後的事件,文件選中事件, input框重置事件, 當input框中的remove按鈕或預覽窗口的關閉按鈕按下時的事件, 文件在預覽框被清除事件,文件上傳成功的事件:(參數較多,有function(event, file, previewId, index, reader),上傳時驗證失敗的函數

插件支持事件(親自測試過的):

fileuploaded(event,data , previewId , index):上傳並完成時觸發(不管是點擊的哪一個按鈕)

      filebatchuploadsuccess(event,data,previewId,index):當點擊input的上傳時(多文件上傳),觸發此事件   因此文件上傳成功時觸發(只在同步上傳時,且全部文件上傳成功)

      filebatchuploadcomplete(event,files,extra):當點擊input的上傳時(不管是不是多文件上傳),觸發此事件 (親測不對 多文件上傳結束後觸發,不管異步仍是同步)

      filesuccessremove(event,id)  :點擊刪除預覽框中的刪除按鈕前觸發( 已上傳成功的文件 )

      filepreremove(event,id,index):點擊刪除預覽框中的刪除按鈕前觸發( initialPreview中的文件除外,只針對於還未上傳的文件 )  //id=文件容器的id  , index=文件容器的index

      fileuploaderror(event,data,msg):選中文件後未經過驗證時觸發及取消正在上傳的文件,可用於限制文件大小類型等

  注:a. filepreajax > filepreupload > fileuploaded> filebatchuploadcomplete

     b.(多文件) filepreajax(屢次觸發) > filepreupload > fileuploaded(屢次觸發) > filebatchuploadcomplete

}

插件支持的方法:

disable,將file input框置爲不可用($('#input-id').fileinput('disable').fileinput('enable'))

,enable ,可用

reset , 重置

destroy, 取消對此input 的初始化(將其變爲一個普通的input框)

refresh, 刷新input

clear :清除提交的記錄

,upload :觸發input的上傳

,cancel ,:取消正在上傳的ajax

lock:鎖定按鈕,取消按鈕除外

unlock,

addToStack :將一個文件加進緩存文件棧(必須傳遞一個文件對象)

,updateStack :用一個文件替換掉緩存文件棧中的一個文件$

clearStack:清空文件棧

getFileStack :返回一個已選中文件列表

getFilesCount ,

zoom,

getPreview
展現頁面加載時,數據庫已存在的圖片(及刪除的接口和傳遞的參數)

{ initialPreview: [ "http://lorempixel.com/1920/1080/nature/1", "http://lorempixel.com/1920/1080/nature/2", "http://lorempixel.com/1920/1080/nature/3", ], initialPreviewConfig: [{ caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //刪除接口或者deleteUrl, key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //刪除接口或者deleteUrl key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //刪除接口或者deleteUrl key: 1, extra: {id: 100}, }, ], }
本身在使用的時候遇到的問題????:
1. 刪除圖片: 情景: 當我上傳成功一個圖片後,發現圖片上傳錯了,想立馬把他刪除掉,可是我當點擊刪除按鈕時,獲取到數據是包裹當前圖片的一個元素對象的id名
問題: 可是,預覽框中的包裹圖片的元素對象的id名居然有些是同樣的(大概是這樣:id = 'upload-1244565476567'),(很詭異),因此根據id名我仍沒法肯定到當前要刪除文件,望哪位大神指點迷津,將十分感謝 . . .

2017-05-13:補充:針對第一個問題,搜過做者的論壇後,初步得出答案,每當有文件上傳成功後,都將上傳控件destroy,而後立刻再次的初始化,並將服務器中的因此圖片的信息經過 initailPreview配置,默認的顯示在頁面中,這樣因此的圖片的刪除動做使用的都是initailPreviewConfig中的url進行刪除. 如有哪一個地方理解的有誤,或者對此插件有熟練的使用,還請大神指點迷津,將十分感謝 . . .

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。