Bootstrap FileInput(文件上傳)中文API整理

TwIStOy 發(fā)布于2019-08-26 13:36 / 4174人閱讀

摘要：默認(rèn)為選擇上傳的文件數(shù)超出了允許的最大限制。在這種情況下，每一個(gè)人選擇的文件被上傳成功后，觸發(fā)事件。此事件僅在上傳和完成同步或異步批量上傳后觸發(fā)。

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

下載地址：https://github.com/kartik-v/b...
API文檔：http://plugins.krajee.com/fil...
D E M O：http://plugins.krajee.com/fil...

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

一、引入文件

二、初始化設(shè)置

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

三、Options 說(shuō)明

屬性名	屬性類(lèi)型	描述說(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ù)覽按鈕的類(lèi)屬性	‘’
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: "",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"],不填將不限制上傳文件后綴類(lèi)型	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ù)設(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		" "
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ù)覽文件類(lèi)型,內(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		"×"
slugCallback	function	選擇后未上傳前回調(diào)方法	null
dropZoneEnabled	boolean	是否顯示拖拽區(qū)域	true
dropZoneTitleClass	String	拖拽區(qū)域類(lèi)屬性設(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

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

屬性名	默認(rèn)值	中文
fileSingle	file	文件
filePlural	files	個(gè)文件
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	沒(méi)有
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) 超過(guò)了允許大小 {maxSize} KB.
msgFilesTooLess	You must select at least {n} {files} to upload.	你必須選擇最少 {n} {files} 來(lái)上傳.
msgFilesTooMany	Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}.	選擇的上傳文件個(gè)數(shù) ({n}) 超出最大文件的限制個(gè)數(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}" 時(shí)出現(xiàn)了一個(gè)錯(cuò)誤.
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.	不正確的類(lèi)型 "{name}". 只支持 "{types}" 類(lèi)型的文件.
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)證錯(cuò)誤
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.	只支持拖拽文件! 跳過(guò) {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}"不能超過(guò){size}像素.
msgImageHeightLarge	Height of image file "{name}" cannot exceed {size} px.	圖像文件"{name}"的高度不能超過(guò){size}像素.
msgImageResizeError	Could not get the image dimensions to resize.	無(wú)法獲取的圖像尺寸調(diào)整。
msgImageResizeException	Error while resizing the image. {errors}	錯(cuò)誤而調(diào)整圖像大小。 {errors}
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 …	拖拽文件到這里 … 支持多文件同時(shí)上傳
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ù)覽上一個(gè)文件",next: "預(yù)覽下一個(gè)文件",toggleheader: "縮放", fullscreen: "全屏", borderless: "無(wú)邊界模式",close: "關(guān)閉當(dāng)前預(yù)覽"}
fileActionSettings		{ removeTitle: "刪除文件",uploadTitle: "上傳文件",zoomTitle: "查看詳情",dragTitle: "移動(dòng) / 重置",indicatorNewTitle: "沒(méi)有上傳", indicatorSuccessTitle: "上傳",indicatorErrorTitle: "上傳錯(cuò)誤", indicatorLoadingTitle: "上傳 ..."},

五、Method說(shuō)明

方法名	描述
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)的事件

GPU云服務(wù)器云服務(wù)器 fileinput文件上傳 bootstrap-fileinput fileinput上傳圖片 php 上傳中文文件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109135.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

TwIStOy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

100天漲薪4k！從功能測(cè)試到自動(dòng)化測(cè)試，我整理的超全學(xué)習(xí)指南！

閱讀 2182·2021-10-12 10:11
● JDK JRE JVM三者的區(qū)別

閱讀 871·2021-10-09 09:41
Confluence漏洞或致大規(guī)模網(wǎng)絡(luò)攻擊客戶(hù)群體包括近6萬(wàn)家公司和組織

閱讀 3807·2021-09-09 11:37
易速互聯(lián)：十三周年慶，美國(guó)Az機(jī)房，1Gbps不限流量服務(wù)器僅550元，服務(wù)器支持自由定制配置

閱讀 1977·2021-09-08 10:41
css3動(dòng)畫(huà)在手機(jī)端的流暢度比較

閱讀 2664·2019-08-30 12:58
【整理】18種推薦的CSS命名和書(shū)寫(xiě)規(guī)范

閱讀 2393·2019-08-30 10:58
gulp插件解決瀏覽器緩存問(wèn)題

閱讀 1309·2019-08-26 13:40
Bootstrap FileInput(文件上傳)中文API整理

閱讀 4175·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Bootstrap FileInput(文件上傳)中文API整理

相關(guān)文章

JavaScript精編干貨

bootstrap fileinput +springmvc圖片上傳-krajee

**用bootstrap file input 上傳圖片**

[ 一起學(xué)React系列 -- 8 ] React中的文件上傳

Ajax 之文件上傳

發(fā)表評(píng)論

0條評(píng)論

TwIStOy

男|高級(jí)講師

TA的文章

100天漲薪4k！從功能測(cè)試到自動(dòng)化測(cè)試，我整理的超全學(xué)習(xí)指南！

● JDK JRE JVM三者的區(qū)別

Confluence漏洞或致大規(guī)模網(wǎng)絡(luò)攻擊客戶(hù)群體包括近6萬(wàn)家公司和組織

易速互聯(lián)：十三周年慶，美國(guó)Az機(jī)房，1Gbps不限流量服務(wù)器僅550元，服務(wù)器支持自由定制配置

css3動(dòng)畫(huà)在手機(jī)端的流暢度比較

【整理】18種推薦的CSS命名和書(shū)寫(xiě)規(guī)范

gulp插件解決瀏覽器緩存問(wèn)題