前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >bootstrap file input 官方文档翻译

bootstrap file input 官方文档翻译

作者头像
windseek
发布于 2018-05-15 09:42:53
发布于 2018-05-15 09:42:53
2.1K0
举报
文章被收录于专栏:杨龙飞前端杨龙飞前端

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-10-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
bootstrap-fileinput插件实现文件上传
bootstrap-fileinput插件下载:https://github.com/kartik-v/bootstrap-fileinput Demo地址:https://plugins.krajee.com/file-input/demo 中文文档:http://www.bootstrap-fileinput.com/ 下载好的目录如下图:
别团等shy哥发育
2023/02/25
3K0
bootstrap-fileinput插件实现文件上传
Bootstrap File Input,最好用的文件上传组件
本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示、上传,以及如何在服务器端进行文件保存。
全栈程序员站长
2022/09/06
4.3K0
Bootstrap File Input,最好用的文件上传组件
PHP开发——yii2多图上传组件的使用
最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中发现还是有不少小细节需要注意的,于是记录一下使用的过程。
Originalee
2018/08/30
1.4K0
bootstrap fileinput api
<link href=”../css/bootstrap.min.css”rel=”stylesheet”>
全栈程序员站长
2022/09/01
7200
input type="file"属性详解,利用capture调用手机摄像头
Value:DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串,所以DOMString 直接映射到 String。
德顺
2019/11/13
11.5K0
input type="file"属性详解,利用capture调用手机摄像头
fileinput的使用
这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希望大家积极指正。
全栈程序员站长
2022/06/26
9560
支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
<link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet">
lin_zone
2018/08/15
2.6K0
支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
关于flask入门教程-bootstrap-fileinput实现文件上传
bootstrap-fileinput是一款非常优秀的HTML5文件上传插件,支持文件预览、多选等一系列特性。
python与大数据分析
2022/03/11
1.4K0
关于flask入门教程-bootstrap-fileinput实现文件上传
webuploader java版本
网上一些webuploader上传的资料,有php版和java版本的,做了一下整合,现分享以下成果,可以讨论,不喜勿碰。说一下过程。
用户5640963
2019/07/26
1K0
<input type=file>文件上传
<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 JavaScript 的 File API 对文件进行操作 .
全栈程序员站长
2022/09/06
4.3K0
基于Django+Bootstrap框架,设计微型小说网站
 以上这段是官方的自我介绍,说说我个人感受吧。首先这个插件支持批量上传,异步上传等功能,简化大部分JS逻辑方面的代码,具体只要跟着官方的API文档看一看,修改一些参数即可。其次,对于上传时会显示一个进度条,用于显示上传的完成度,这样直观反映了完成度。
迅达集团
2019/03/18
2.1K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(32)-swfupload多文件上传[附源码]
文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示。这次我们演示利用swfupload多文件上传,项目上文件上传是比不可少的,大家这个心里都
用户1149182
2018/01/16
1.5K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(32)-swfupload多文件上传[附源码]
bootstrap fileinput 文件上传和回显「建议收藏」
官网下载文件http://plugins.krajee.com/file-input/demo
全栈程序员站长
2022/08/15
2.9K0
<input type=”file” />浏览时只显示指定文件类型
1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf” 4.accept=”application/poscript” 5.accept=”application/rtf” 6.accept=”application/x-zip-compressed” 7.accept=”audio/basic” 8.accept=”audio/x-aiff” 9.accept=”audio/x-mpeg” 10.accept=”audio/x-pn/realaudio” 11.accept=”audio/x-waw” 12.accept=”image/gif” 13.accept=”image/jpeg” 14.accept=”image/tiff” 15.accept=”image/x-ms-bmp” 16.accept=”image/x-photo-cd” 17.accept=”image/x-png” 18.accept=”image/x-portablebitmap” 19.accept=”image/x-portable-greymap” 20.accept=”image/x-portable-pixmap” 21.accept=”image/x-rgb” 22.accept=”text/html” 23.accept=”text/plain” 24.accept=”video/quicktime” 25.accept=”video/x-mpeg2″ 26.accept=”video/x-msvideo”
全栈程序员站长
2022/09/13
7250
<input type=”file” />浏览时只显示指定文件类型
bootstrap-fileinput上传完文件后再打开上传文件界面显示取消按钮
Bootstrap File Input是一款基于bootstrap框架的html5上传文件插件,具体展示效果如下:
johnhuster的分享
2022/03/28
1.9K0
bootstrap-fileinput上传完文件后再打开上传文件界面显示取消按钮
扒一扒使用boostrap-fileinput上传插件遇到的坑,Bootstrap-fileinput上传插件的使用详解,「建议收藏」
由于公司项目的需求,需要实现动植物名录的添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput的上传插件,在提交添加界面表单数据的同时上传一张或者多张图片,并将上传的图片保存到本地磁盘中(本文是f:盘的目录下),在在实现的时候,不适用bootstrap-fileinput上传插件本身的上传按钮(因为本身的按钮只能上传图片),需要点击提交,将表单的其他信息和图片一起提交到后台。
全栈程序员站长
2022/06/26
4.4K0
扒一扒使用boostrap-fileinput上传插件遇到的坑,Bootstrap-fileinput上传插件的使用详解,「建议收藏」
php之yii2 图片上传插件fileinput使用说明
在网上搜了很多yii2图片上传插件,感觉这个和bootstrap融合的很好,比较能满足需求,故推荐给大家。
IT工作者
2022/06/30
1K0
Grafana官方文档翻译
Grafana是一个开源指标分析和可视化套件。 它最常用于可视化基础设施和应用程序分析的时间序列数据,但许多应用于其他领域,包括工业传感器,家庭自动化,天气和过程控制。
用户5760343
2022/05/14
4.2K0
Grafana官方文档翻译
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用。关于Uploadify的控件介绍,可以参考我之前的随笔介绍《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》。 1、文件上传插件File Input介绍 这
MonroeCode
2018/02/09
2.5K0
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
文件上传控件bootstrap-fileinput与Python交互
[up-6108568931341e960672fcd7f8c2d51e57d.png] 注意 下面的原因,可能是和后端API交互不成功的原因 fileinput版本不正确,需要大于5.0 前端设置的name属性值和后端接收的属性值不一致 必要的css和js文件 请确保下面的js和css文件存在 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="htt
嘉美伯爵
2021/01/05
1.1K0
推荐阅读
相关推荐
bootstrap-fileinput插件实现文件上传
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档