bootstrap-fileupload-上传文件控件
2023-09-27 14:20:51 时间
官方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
<!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学习笔记
- vue之导入Bootstrap以及jQuery的两种方式
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- carthage bootstrap --platform iOS 报 SSL_ERROR_SYSCALL in connection to github.com:443
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐
- Bootstrap fileinput.js,最好用的文件上传组件
- Bootstrap之Form表单验证神器: BootstrapValidator(转)
- 【swagger】 swagger-ui的升级版swagger-bootstrap-ui
- Bootstrap 简介
- how bootstrap fit into our website design?
- Bootstrap学习笔记1--表单样式
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- Bootstrap栅格布局系统的
- JS组件系列——Bootstrap Select2组件使用小结
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- bootstrap的图片自适应属性