• Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件，在用的过程中，网上能查到的api都不是很全，所以想着整理一份比较详细的文档，方便自己今后使用，也希望能给大家带来帮助，如有错误，希望大家积极指正。

    一、    引入文件

    <link href="../css/bootstrap.min.css"rel="stylesheet">

    <link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />

    <scriptsrc="../js/jquery-2.0.3.min.js"></script>

    <script src="../js/fileinput.js"type="text/javascript"></script>

    <script src="../js/bootstrap.min.js"type="text/javascript"></script>

    二、    初始化设置：

    $("#uploadfile").fileinput({

                    language: 'zh', //设置语言

                    uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

                   allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

                   //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

                    uploadAsync: true, //默认异步上传

                    showUpload:true, //是否显示上传按钮

                    showRemove :true, //显示移除按钮

                    showPreview :true, //是否显示预览

                    showCaption:false,//是否显示标题

                    browseClass:"btn btn-primary", //按钮样式    

                   dropZoneEnabled: false,//是否显示拖拽区域

                   //minImageWidth: 50, //图片的最小宽度

                   //minImageHeight: 50,//图片的最小高度

                   //maxImageWidth: 1000,//图片的最大宽度

                   //maxImageHeight: 1000,//图片的最大高度

                    //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小

                   //minFileCount: 0,

                    maxFileCount:10, //表示允许同时上传的最大文件个数

                    enctype:'multipart/form-data',

                   validateInitialCount:true,

                    previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

                   msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

               }).on("fileuploaded", function (event, data, previewId, index){

                     

    });

    三、    Options 说明：

    属性名

    属性类型

    描述说明

    默认值

    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>&nbsp;'

    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">&times;</span>'

    slugCallback

    String

    null

    dropZoneEnabled

    boolean

    是否显示拖拽区域

    true

    dropZoneTitleClass

    String

    拖拽区域类属性设置

    'file-drop-zone-title'

    fileActionSettings

    Object

    设置预览图片的显示样式

    {

        showRemove: true,

        showUpload: false,

        showZoom: true,

        showDrag: true,

        removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',

        removeClass: 'btn btn-xs btn-default',

        removeTitle: 'Remove file',

        uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',

        uploadClass: 'btn btn-xs btn-default',

        uploadTitle: 'Upload file',

        zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',

        zoomClass: 'btn btn-xs btn-default',

        zoomTitle: 'View Details',

        dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',

        dragClass: 'text-info',

        dragTitle: 'Move / Rearrange',

        dragSettings: {},

        indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',

        indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',

        indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',

        indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>',

        indicatorNewTitle: 'Not uploaded yet',

        indicatorSuccessTitle: 'Uploaded',

        indicatorErrorTitle: 'Upload Error',

        indicatorLoadingTitle: 'Uploading ...'

    }

    otherActionButtons

    String

    ''

    textEncoding

    String

    编码设置

    'UTF-8'

    ajaxSettings

    Object

    {}

    ajaxDeleteSettings

    Object

    {}

    showAjaxErrorDetails

    boolean

    true

    四、    提示说明设置：

    属性名

    默认值

    中文

    fileSingle

    file

    文件

    filePlural

    files

    个文件

    browseLabel

    Browse &hellip

    选择 &hellip;

    removeLabel

    Remove

    移除

    removeTitle

    Clear selected files

    清除选中文件

    cancelLabel

    Cancel

    取消

    cancelTitle

    Abort ongoing upload

    取消进行中的上传

    uploadLabel

    Upload

    上传

    uploadTitle

    Upload selected files

    上传选中文件

    msgNo

    No

    没有

    msgNoFilesSelected

    No files selected

    “”

    msgCancelled

    Cancelled

    取消

    msgZoomModalHeading

    Detailed Preview

    详细预览

    msgSizeTooSmall

    File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

    File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

    msgSizeTooLarge

    File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>.

    文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.

    msgFilesTooLess

    You must select at least <b>{n}</b> {files} to upload.

    你必须选择最少 <b>{n}</b> {files} 来上传.

    msgFilesTooMany

    Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>.

    选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.

    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}" 的预览.

    msgFilePreviewError

    An error occurred while reading the file "{name}".

    读取 "{name}" 时出现了一个错误.

    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.

    不正确的类型 "{name}". 只支持 "{types}" 类型的文件.

    msgInvalidFileExtension

    Invalid extension for file "{name}". Only "{extensions}" files are supported.

    不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名.

    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

    验证错误

    msgLoading

    Loading file {index} of {files} &hellip;

    加载第 {index} 文件 共 {files} &hellip;

    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.

    只支持拖拽文件! 跳过 {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}"不能超过{size}像素.

    msgImageHeightLarge

    Height of image file "{name}" cannot exceed {size} px.

    图像文件"{name}"的高度不能超过{size}像素.

    msgImageResizeError

    Could not get the image dimensions to resize.

    无法获取的图像尺寸调整。

    msgImageResizeException

    Error while resizing the image.<pre>{errors}</pre>

    错误而调整图像大小。<pre>{errors}</pre>

    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 &hellip;

    拖拽文件到这里 &hellip;<br>支持多文件同时上传

    dropZoneClickTitle

    <br>(or click to select {files})

    <br>(或点击{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: '预览上一个文件',

                next: '预览下一个文件',

                toggleheader: '缩放',

                fullscreen: '全屏',

                borderless: '无边界模式',

                close: '关闭当前预览'

            }

    fileActionSettings

    {     removeTitle: '删除文件',

                uploadTitle: '上传文件',

                zoomTitle: '查看详情',

                dragTitle: '移动 / 重置',

                indicatorNewTitle: '没有上传',

                indicatorSuccessTitle: '上传',

                indicatorErrorTitle: '上传错误',

                indicatorLoadingTitle: '上传 ...'

            },

    五、    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").on("fileuploaded", function(event, data, previewId, index) {

    });

    filereset

    fileclear

    点击浏览框右上角X 清空文件前响应事件

    $("#fileinput").on("fileclear",function(event, data, msg){

    });

    filecleared

    点击浏览框右上角X 清空文件后响应事件

    $("#fileinput").on("filecleared",function(event, data, msg){

    });

    fileimageuploaded

    在预览框中图片已经完全加载完毕后回调的事件

    六、    常见错误：

     (1)   当点击上传后，报错，提示你必须选择最少X个文件上传。

    错误原因:html中input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。
  • 相关阅读:
    手持设备开发项目实例二（盘点扫描系统）
    通过Netty通信，采集设备现场GPS数据,并存放在redis服务器。
    自动立体车库控制应用系统
    Miscorsoft AnalysisServices 开发
    日志分析常用命令
    MVC中 @ResponseBody、@RequestMapping
    spring与redis集成之aop整合方案
    工业控制系统之葡萄酒保温发酵控制系统
    JS闭包分享
    架构之美—数据库架构
  • 原文地址：https://www.cnblogs.com/itjeff/p/8393466.html
Copyright © 2020-2023  润新知