如何使用Bootstrap 3上传Jasny的文件

Question

所以Bootstrap 3刚刚问世.我更喜欢Bootstrap 2,但我目前正在使用Jasny的文件上传扩展.有没有办法挑选该功能并将其与Bootstrap 3一起使用？

Answer 1

当你只想要文件上传插件我基本上会工作,请参阅:http://bootply.com/72995

您可以从以下网址下载该插件:http://bootstrap-server.jasny.net/bootstrap-fileupload.zip您将获得所需的javascript和css文件.或者你可以从http://jasny.github.io/bootstrap/下载:file-upload.less和file-upload.js文件.

使用本指南:http://www.bootply.com/migrate-to-bootstrap-3使您的html与Twitter的Bootstrap 3兼容.(在您的css文件中更改输入附加类等).

祝好运

Answer 2

对于一个项目需要这个,所以这就是我做的.好消息是主要的变化是HTML,因为可以通过在插件中仅添加5行并修改4个其他内容来使插件适应Bootstrap 3.0 css.

DEMO

以下是html使用Bootstrap 3.0的fileupload的标记:

<div class="form-group">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-group">
            <div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i> 
                <span class="fileupload-preview"></span>
            </div>
            <div class="input-group-btn">
                <a class="btn btn-default btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" class="file-input"/></a>
                <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>
</div>

和改变bootstrap-fileupload.css:

.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
  overflow: hidden;                 /*Added this line*/
  max-height: 34px;                 /*Added this line*/
}
.fileupload .fileupload-preview {   /*Added this line*/
  line-height: 21px;                /*Added this line*/
}                                   /*Added this line*/

以及

/*==================================*/
/*.fileupload-new .input-append .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}*/
/*change to this:*/
.fileupload-new .input-group .btn-file {
  -webkit-border-radius: 0 3px 3px 0 !important;
  -moz-border-radius: 0 3px 3px 0 !important;
  border-radius: 0 3px 3px 0 !important;
}
/*==================================*/

最有可能的优化是可以完成的(旧的一些类css可以删除,但这必须进行测试)来改善代码,但这是我现在使用的,因为它很容易实现.

Answer 3

如果你只想用 bootstrap3 引导文件输入，你可以试试这个
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/