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