github:https://github.com/zhangkaitao/bootstrap-file-input
为bootstrap提供统一的文件上传按钮
试用了几个类似的,不能满足需求,干脆自己写一个。
思路是:利用label完成辅助点击file框,并把file框设置为透明即可,非常简单
可完美解决在ie中的“访问限制”问题(即必须是用户点击才能进行文件上传),且无位置偏移问题。
使用方式
导入js和css即可,会自动查找file标签执行初始化
<script src="./js/bootstrap.file-input.js"></script>
<link href="./css/bootstrap.file-input.css" rel="stylesheet">
效果
其他参考:
1、http://gregpike.net/demos/bootstrap-file-input/demo.html
确点:ie8(其他版本未测试)下,可能在使用过程中input位置有偏差
2、http://addyosmani.github.com/jquery-ui-bootstrap/extra.html#file-input
这个是jquery-ui-bootstrap的参考示例,确点也是ie的限制
所以大家可以根据我的思路改写这两个。
相关推荐
源码以及API地址: bootstrap-fileinput源码:...bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo
bootstrap-fileinput 使用例子,包含一些关键词的解释
可在任何地方使用很小,只有2kb或更少(如果您将其压缩)目录安装与npm npm install bs-custom-file-input --saveCDN CDN 链接jsDelivr jsDelivr,缩小如何使用它您应该等待文档就绪事件,然后调用init方法使您的...
Bootstrap File Input 文件上传控件离线文档,完美结合bootstrap,支持ajax异步回调。
Angular-bs-custom-file-input.zip,bootstrap 4自定义文件输入的一个小插件,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的...
file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下
介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用...关于Bootstrap-fileinput的API文档可参考http://plugins.krajee.com/file-input 本文源码已在Admin
介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用...关于Bootstrap-fileinput的API文档可参考http://plugins.krajee.com/file-input 本文源码已在Admin
input type=”file”>的显示样式,基础的样式实在太难看了。 上传的头像需要进行质量压缩跟大小裁剪,以减缓浏览器的压力。 成果预览: 使用到的技术插件 Jcrop:用于前端“裁剪”图片 bootstrap-fileinput...
经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错。赶紧就撸起来了。 1、下载压缩包。插件地址...
大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input。 逻辑说明:先从后台获取数据展示,然后进行编辑。 废话不多说, 直接上代码. 1. 页面部分代码: ...
最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 ...
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
文件上传插件Bootstrap File Input 的参考手册
前面开发一个系统用了这个插件, 因为属于本地化运行, 无法引用在线css文件, 导致所使用的字体图标也无法正常,所以看了源码找了在线字体, 专门下载归类, 现在分享给大家, 希望可以帮助到各位小伙伴, 费了点...
An enhanced HTML 5 file input for Bootstrap 3.x and 4.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/...
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:’deletefile’,key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。 在配置中...