zoukankan      html  css  js  c++  java
  • bootstrap file input 官方文档翻译

    file Input官方文档 中文翻译

    file input 特性

    1、这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js的浏览器。

    2、fileinput 插件包括options,templates等三个部分来控制展示

      。文件标题部分:用来展示选中的文件的简介信息

      。文件按钮行为部分:用来浏览,移除和上传文件

      。文件预览部分:用来将展示选中的文件到客户端实现预览(支持图片, 文档, flash, 和视频类型),别的文件类型将以宿略图的形式预览

    3、如果你设置了class=file,这个插件就会自动把type为file的input框转换成一个文件选择输入框,input框的所有选项可以通过html5的data属性来实现。

    4、能够选择和预览多个文件,使用html5 文件阅读api来读取和预览文件。如果很多文件被选到了,会展示文件正在被加载到预览区的过程。

    5、提供可以根据你对fileinput不同的展示需求,而改变的预定义tmplate和css 类。

    6、能够配置这个插件来初始化带有标题的预览图(对更新记录的场景最有用)。插件选项部分的initialPreview,initialPreviewConfig,和initialCaption这三个属性来配置这个功能。

    7、能够把内容凸显出来作为一个预览,可以看到幻灯片缩放预览效果和最大限度放大或者全屏预览。

    8、通过拖拽来排序/重新安排初始化的预览内容。

    9、能够完全控制摆放组件,可以控制样式和布局。

    10、通过 locales/translations.来支持在相同的页面使用多种语言组件。

    11、显示或者隐藏一些或者全部的以下选项:

      。标题部分

      。预览部分

      。上传部分

      。移除部分

    12、定制目标容器元素的展示位置来显示 标题容器,标题文字,预览容器,预览图片,预览状态插件。

    13、对于text文件预览,会自动用缩略图来包裹,当触发onhover事件时会将一个用于完全展示内容指示链接展示出来。

    14、定制预览,加载过程,和文件选择的信息。

    15、上传路径默认指向form的submit事件,支持ajax上传传递参数。

    16、开发了更先进的jquery触发事件。目前能使用的事件有,fileresetfileclearfileclearedfileloaded, 和 fileerror。

    17、支持readonly和disabled属性。

    18、对超过它的容器宽度的文件标题,动态的分配大小。

    19、增强fileimageuploaded 事件,使图片完全加载到预览区之后还能被移除。

    20、当图片大小超过预览区的宽度时,自动调整预览图片大小。

    21、完全模块化,具有可扩展型,允许开发者根据自己需求来配置file-input插件。

    22、根据不同的预览类型智能预览,内置文件类型分类有:imagetexthtmlvideoaudioflash,object, 和其他.

    23、allowedPreviewTypes:你可以配置所有被允许展示在预览区的文件类型,这些默认是['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],因此所有的文件类型被看成一个对象。例如:只展示image和video,你可以这样设置['image', 'video']。要想使内容预览变得不可用只显示预览icon而不是缩略图,你可以把这个属性设置为null,空值,或者false。

    24、allowedPreviewMimeTypes:除了allowedPreviewTypes,你还可以控制所有的mime类型(ajax中的contenttype)是否展示预览,这个默认值是null,意味着所有的mime类型会被展示出来,>注意:使用2.5.0 版本的,你可以通过设置allowedFileTypes 和 allowedFileExtensions来控制哪种文件类型或文件扩展可以被展示。

    25、layoutTemplates:允许你通过一个属性配置所有的布局模板。布局对象可以配置为:main1main2,previewcaption, 和 modal

    26、previewTemplates:所有的为每种类型配置的模板都被整合到一个属性里,而不是把image,text等分开配置模板。key值是设置在allowedPreviewTypes 的各种格式,value是用于预览的模板。对于每个预览文件类型(genericimagetexthtmlvideoaudioflashobject, 和 other)都有默认的预编辑模板,通用模板使用指令标志仅用于显示initialPreview 内容。

    27、previewSettings:允许你给每个预览图片类型配置宽度和高度,这个插件为每个文件类型(imagetexthtmlvideoaudioflash, 和 object)设置了预定义的高度和宽度。

    28、fileTypeSettings:允许你给每个预览图片类型调用一个回调方法来配置和改变它,这个插件有默认的回调方法来识别每种文件类型(imagetexthtmlvideoaudioflash, 和 object)。

    29、增强使用模板代替标签的功能,使用这个版本,将会代替模板string来自动检查标签的多个事件。

    30、通过返回输出来控制事件,在任何事件里增加自定义校验来阻止上传。

    31、翻译和区域设置的支持

    注意:flash预览功能需要安装Shockwave flash插件并且被客户端浏览器支持。flash预览功能目前只能成功在webkit 内核的浏览器中工作。video或者audio格式的被支持html5的现代浏览器支持。要注意浏览器有对video、audio格式(mp4,webm,ogg,mp3,wav)的标签数量进行限制。video文件的大小推荐使用小的,(可以通过maxFileSize属性来控制),以至于不影响预览效果。

    File Upload 特点

    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    Mysql登录错误:ERROR 1045 (28000): Plugin caching_sha2_password could not be loaded
    Docker配置LNMP环境
    Docker安装mysqli扩展和gd扩展
    Docker常用命令
    Ubuntu常用命令
    单例模式的优缺点和使用场景
    ABP 多租户数据共享
    ABP Core 后台Angular+Ng-Zorro 图片上传
    ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
    AbpCore 执行迁移文件生成数据库报错 Could not find root folder of the web project!
  • 原文地址:https://www.cnblogs.com/windseek/p/5951227.html
Copyright © 2011-2022 走看看