Bootstrap FileInput 中文API

Bootstrap FileInput 中文API

一、用法

1.1 全部引用（根据具体需求引用对应文件，都有相关引用说明）

<!--CSS-->
<!-- 1.bootstrap.min.css-->
<link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css”>

<!-- 2.fileinput.min.css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- 3.fileinput-rtl.min.css（非必要引用） 如果使用RTL（从右到左）方向，请在fileinput.css之后加载RTL CSS文件，方法是取消注释-->
<！ -  link href =“https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput-rtl.min.css”media =“all”rel =“stylesheet” type =“text / css”/  - >

<！ - 4.font-awesome.min.css （非必要引用）如果使用主题或图标设置像字体真棒（注意，默认图标使用的是图形和`fa`主题可以覆盖它）可选地取消注释行 - >
<！ -  link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media =“all”rel =“stylesheet”type =“text / css“/  - >

<!--JS-->
<!-- 1.jquery.js-->
<script src =“https://code.jquery.com/jquery-3.2.1.min.js”> </ script>
<!-- 2.fileinput.min.js 主要的文件输入插件文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script> 

<!--3.bootstrap.min.js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>

<!--  4.purify.min.js（非必要引用）仅在您希望在预览中纯化HTML内容时才需要HTML 文件. 这必须在fileinput.min.js 之前加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>

<!-- 5.piexif.min.js （非必要引用）仅用于恢复调整大小的图像中的Exif数据以及您的时间 希望在上传之前调整图像大小。**这必须在fileinput.min.js 之前加载** -->      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>

<!-- 6.LANG.js （非必要引用）如果您需要翻译您的语言，则可以选择如下所示的语言环境文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>

<!-- 7.sortable.min.js（非必要引用）仅在您希望在初始预览中对文件进行排序/重新排列时才需要。 这必须在fileinput.min.js之前加载   -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>

1.2 用法

<input id="files" name="files" class="file" type="file" multiple data-show-caption="true" >
<script>
    $("#files").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "对接后台的URL接口地址", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png','mp4'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove : true, //显示移除按钮
        showPreview : true, //是否显示预览
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        //dropZoneEnabled: true,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        maxFileSize: 102400,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        //maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        initialPreview : initialPreview

    }).on('filepreupload', function(event, data, previewId, index) {     //上传中
        debugger;
        console.log('文件正在上传');
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        debugger;
        console.log('文件上传成功！');

    }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
        debugger;
        console.log('文件上传失败！');
    }).on('filebatchuploadcomplete', function(event, data, msg) {  
        debugger;
        console.log('最后的方法');
    });
</script>

二、 API

2.1 option

属性名	属性类型	描述说明	默认值	使用示例
language	String	多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后	'en'	language :'en'
showCaption	Boolean	是否显示文件标题	true	showCaption: true
showBrowse	Boolean	是否显示浏览按钮	true	“
showUpload	Boolean	是否显示上传按钮	true	“
showCancel	Boolean	是否显示取消按钮	true	“
showClose	Boolean	是否显示关闭按钮	true	“
showUploadedThumbs	Boolean	直到按下删除/清除按钮，是否在预览窗口中持续显示上传的文件缩略图（对于ajax上传）	true	设置false为时，选择上传的下一批文件将从预览中清除这些缩略图。
browseOnZoneClick	Boolean	是否启用文件浏览/选择预览区的点击	false	“
autoReplace	Boolean	是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。	false	“
previewClass	String	附加到预览容器的任何附加CSS类	“	“
showCaption	Boolean	是否显示文件标题	true	“
captionClass	String	附加到标题容器的任何附加CSS类	“	“
frameClass	String	CSS类另外应用于每个文件缩略图框架。	krajee-default	“
mainClass	String	附加到主插件容器的任何附加CSS类，该容器将呈现标题以及浏览，移除和上传按钮	file-caption-main	“
purifyHtml	Boolean	是否纯化在预览中为HTML内容类型显示的HTML内容	true	这个功能需要通过cure53加载DomPurify插件
fileSizeGetter	boolean	根据bytes参数生成人性化文件大小的回调函数。		“
initialPreview	String	排列要显示的初始预览内容	“	initialPreview :[ "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>"]
initialPreviewCount	int	初始预览项的数量	“	“
initialPreviewDelimiter	String	用于将初始预览内容分割为单个文件缩略图的分隔符（仅适用initialPreview于以字符串形式传递，而不是数组形式时）	*$$*	“
initialPreviewAsData	Boolean	将初始预览内容集解析为数据而不是原始标记	false	“
initialPreviewFileType	String	设置初始化问价你的类型这是在键中配置的文件模板类型之一previewSettings。这对识别用于显示特定文件内容的模板非常有用	image	initialPreviewFileType: 'image'
initialPreviewConfig	array	用于为每个initialPreview项目设置重要属性的配置包含以下配置: type、filetype、size、previewAsData、caption、width、url、key、frameClass、frameAttr、extra	[]	initialPreviewConfig: [{caption: 'desert.jpg', width: '120px', url: '/localhost/avatar/delete', key: 100, extra: {id: 100}} ]
initialPreviewShowDelete	Boolean	是否将为每个已经创建的缩略图显示删除按钮initialPreview	false	“
removeFromPreviewOnError	Boolean	是否应该从错误预览中删除文件缩略图	false	“
previewThumbTags	array	这将是缩略图模板中使用的标记列表，缩略图模板将在缩略图标记中动态替换	[]	“
initialPreviewThumbTags	array	这是previewThumbTags专门用于初始预览内容的扩展- 但将被配置为对应于每个初始预览缩略图的对象数组	[]	“
deleteExtraData	object	函数额外的数据将作为数据传递给通过POST初始预览删除url / AJAX服务器调用	“	“
deleteUrl	String	用于通过AJAX post响应在初始预览中删除图像/内容的URL	“	“
initialCaption	String	显示的最初的预览字幕文本	“	“
overwriteInitial	Boolean	是否要覆盖最初的预览内容和标题设置	true	“
layoutTemplates	object	用于渲染布局的每个部分的模板配置	“	“
previewTemplates	object	模板配置来呈现每个预览文件类型	“	“
previewSettings	object	对象的CSS样式设置呈现每个预览文件类型设置上面	“	“
previewSettingsSmall	object	CSS样式仅适用于屏幕宽度小于400像素的小型设备	“	“
previewZoomSettings	object	在放大的模态预览中显示的内容的HTML属性的配置	“	“
previewZoomButtonIcons			“	“
previewZoomButtonClasses			“	“
preferIconicPreview			“	“
preferIconicZoomPreview			“	“
previewZoomButtonTitles			“	“
allowedFileTypes			“	“
allowedFileExtensions			“	“
allowedPreviewTypes			“	“
allowedPreviewMimeTypes			“	“
defaultPreviewContent			“	“
customLayoutTags			“	“
customPreviewTags			“	“
fileTypeSettings			“	“
previewFileIcon			“	“
previewFileIconClass			“	“
previewFileIconSettings			“	“
previewFileExtSettings			“	“
buttonLabelClass			“	“
browseLabel			“	“
browseIcon			“	“
browseClass			“	“
removeLabel			“	“
removeIcon			“	“
removeClass			“	“
removeTitle			“	“
uploadLabel			“	“
uploadIcon			“	“
uploadClass			“	“
uploadUrl			“	“
uploadThumbUrl			“	“
uploadAsync			“	“
uploadExtraData			“	“
zoomModalHeight			“	“
minImageHeight			“	“
maxImageHeight			“	“
minImageWidth			“	“
maxImageWidth			“	“
resizeImage			“	“
resizePreference			“	“
resizeImageQuality			“	“
resizeDefaultImageType			“	“
resizeIfSizeMoreThan			“	“
minFileSize			“	“
maxFileSize			“	“
maxFilePreviewSize			“	“
minFileCount			“	“
maxFileCount			“	“
validateInitialCount			“	“
msgNo			“	“
msgCancelled			“	“
Cancelled			“	“
msgPlaceholder			“	“
msgZoomTitle			“	“
msgZoomModalHeading			“	“
msgFileRequired			“	“
msgSizeTooSmall			“	“
msgFilesTooLess			“	“
msgFilesTooMany			“	“
msgFileNotFound			“	“
msgFileSecured			“	“
msgFilePreviewAborted			“	“
msgInvalidFileType			“	“
msgInvalidFileExtension			“	“
msgUploadAborted			“	“
msgUploadThreshold			“	“
msgUploadBegin			“	“
msgUploadEnd			“	“
msgUploadEmpty			“	“
msgUploadError			“	“
msgValidationError			“	“
msgValidationErrorClass			“	“
msgValidationErrorIcon			“	“
msgErrorClass			“	“
msgLoading			“	“
msgProgress			“	“
msgSelected			“	“
msgFoldersNotAllowed			“	“
msgImageHeightSmall			“	“
msgImageWidthLarge			“	“
msgImageHeightLarge			“	“
msgImageResizeError			“	“
msgImageResizeException			“	“
msgAjaxError			“	“
msgAjaxProgressError			“	“
ajaxOperations			“	“
progressClass			“	“
progressCompleteClass			“	“
progressErrorClass			“	“
progressUploadThreshold			“	“
previewFileType			“	“
zoomIndicator			“	“
elErrorContainer			“	“
elCaptionContainer			“	“
elCaptionText			“	“
elPreviewContainer			“	“
elPreviewImage			“	“
elPreviewStatus			“	“
slugCallback			“	“
dropZoneEnabled			“	“
dropZoneTitle			“	“
dropZoneTitleClass			“	“
dropZoneClickTitle			“	“
fileActionSettings			“	“
otherActionButtons			“	“
textEncoding			“	“
ajaxSettings			“	“
ajaxDeleteSettings			“	“
showAjaxErrorDetails			“	“
mergeAjaxCallbacks			“	“
mergeAjaxDeleteCallbacks			“	“
retryErrorUploads			“	“