bootstrap-fileupload-上传文件控件
2016-01-17 21:30
555 查看
官方github:https://github.com/kartik-v/bootstrap-fileinput
官方dome网站:http://plugins.krajee.com/file-basic-usage-demo
博客参考:http://www.cnblogs.com/wuhuacong/p/4774396.html
如何下位案例:其中bootstrap为3.3.5,jquery为2.1.1,bootstrap-fileinput为3.x
官方dome网站:http://plugins.krajee.com/file-basic-usage-demo
博客参考:http://www.cnblogs.com/wuhuacong/p/4774396.html
如何下位案例:其中bootstrap为3.3.5,jquery为2.1.1,bootstrap-fileinput为3.x
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload. This must be loaded before fileinput.min.js --> <script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script> <script src="bootstrap-fileinput-master/js/fileinput.min.js"></script> <!-- bootstrap.js below is only needed if you wish to the feature of viewing details of text file preview via modal dialog --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script> <!-- optionally if you need translation for your language then include locale file as mentioned below --> <script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script> </head> <body> <label class="control-label">Select File</label> <input id="input-1" type="file" class="file"> <label class="control-label">Select File</label> <input id="input-1a" type="file" class="file" data-show-preview="false"> <label class="control-label">Select File</label> <input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true"> <label class="control-label">Readonly Input</label> <input id="input-3a" type="file" class="file" readonly="true"> <label class="control-label">Disabled Input</label> <input id="input-3b" type="file" class="file" disabled="true"> <label class="control-label">Select File</label> <input id="input-4" name="input4[]" type="file" multiple class="file-loading"> <script> $(document).on('ready', function() { $("#input-4").fileinput({showCaption: false}); }); </script> <label class="control-label">Select File</label> <input id="input-6" name="input6[]" type="file" multiple class="file-loading"> <script> $(document).on('ready', function() { $("#input-6").fileinput({ showUpload: false, maxFileCount: 10, mainClass: "input-group-lg" }); }); </script> <label class="control-label">Select File</label> <input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'> </body> </html>
相关文章推荐
- Bootstrap结合PHP实现简单的翻页功能
- 2016 系统设计第一期 (档案一)MVC 和 Bootstrap 表单转换
- 【Spring】Spring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload
- Bootstrap 栅格系统
- 【Spring】Spring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload
- bootstrap与360浏览器不兼容问题
- Java教程]JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- 分布式java shiro、maven、Bootstrap、Bootstrap、SpringMVC、Mybatis、Hibernate
- 关于bootstrap-datetimepicker 插件的配置参数详解
- 002-bootstrap图标的使用。
- 001-bootstrap学习起步,搭建bootstrap环境。
- 开始学习bootstrap啦!
- 0001 -- 搭建bootstrap环境。
- 0002 -- bootstrap 图标的使用。
- 0003 -- bootstrap 按钮的使用。
- Java源码 SpringMVC Mybatis Shiro Bootstrap Rest Webservice
- 自学BootStrap(第一季)
- bootstrap 图标库
- bootstrap-datetimepicker控件位置异常
- bootstrap ace admin 整合java HTML5 全新高大尚web后台框架