bootstrap file input 官方文档翻译

   2023-02-08 学习力0
核心提示:file Input官方文档 中文翻译file input 特性1、这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js的浏览器。2、fileinput 插件包括options,templates等三个部分来控制展示  。文件标题

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 特点

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Bootstrap基础:选择器
    1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即
    03-16
  • bootstrap模态框手动开启关闭与设置点击外部不关闭
    bootstrap模态框手动开启关闭与设置点击外部不
    完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html1.手动开启与关闭模态框的方法  按钮开启与JS函数开启(2种)!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleBootstrap 实例 - 模态框(Modal)插件/titlelink rel="styleshe
    03-16
  • Bootstrap.css 中请求googleapis.com/css?famil
    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:
    03-16
  • 基于.NET6、FreeSql、若依UI、LayUI、Bootstrap
    近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述
    03-16
  • elasticsearch bootstrap.memory_lock
    检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应:{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":
    03-08
  • day 57 Bootstrap 第一天
    day 57 Bootstrap 第一天
    一 、bootstrap是什么 http://v3.bootcss.com/css/#grid-options(参考博客)是一个前端开发的框架.HTMLCSSJS下载地址:https://v3.bootcss.com/ (当前版本3.3.7)目录结构 bootstrap-3.3.7-dist/├── css// CSS文件│ ├── bootstrap-theme.css// Boo
    03-08
  • 基于bootstrap_网站汇总页面 bootstrap网站案例
    基于bootstrap_网站汇总页面 bootstrap网站案例
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"title我的网页/titlelink rel="stylesheet" href="css/bootstrap.min.css"/headbody!--头部信息--nav class="navbar navbar-inverse navbar-fixed-top"div class="conta
    03-08
  • 50 个 Bootstrap 插件
    Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。1. Boots
    03-08
  • Bootstrap资源 bootstrap官方文档
    官方网站:http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客:http://blog.getbootstrap.com/  中文文档:http://wrongwaycn.github.com/bootstrap/docs/index.html  图标:Font Awesomehttp://fortawesome.github.com
    03-08
  • bootstrap bootstrap检验
    bootstrap是简洁灵活的用于搭建web页面的Html,Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery,因此jquery要在bootstrap之前引进一般要把CS
    03-08
点击排行