Как использовать загрузку файла Jasny с помощью Bootstrap 3

Итак, Bootstrap 3 только что вышел. Я предпочитаю его Bootstrap 2, но в настоящее время я использую расширение Jasny для загрузки файлов. Есть ли способ черви-выбрать эту функцию и использовать ее с Bootstrap 3?

Ответы

Ответ 1

Если вам нужен только плагин для загрузки файлов, я буду работать в основном: http://bootply.com/72995

Вы можете загрузить плагин из: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip. Вам понадобятся файлы javascript и css. Или вы можете загрузить файлы file-upload.less и file-upload.js из http://jasny.github.io/bootstrap/

Используйте это руководство: http://www.bootply.com/migrate-to-bootstrap-3, чтобы сделать ваш html совместимым с Twitter Bootstrap 3. (изменить классы, такие как input-append в вашем файле css).

Удачи.

Ответ 2

Это нужно для проекта, так вот как я это сделал. Хорошей новостью является основное изменение в HTML, так как можно адаптировать плагин к Bootstrap 3.0, добавив только 5 строк и изменив еще 4 в css плагина.

DEMO

Вот разметка HTML для использования файловой загрузки с Bootstrap 3.0:

<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 могут быть удалены, но это должно быть проверено), чтобы улучшить код, но это то, что я использую сейчас, поскольку это довольно легко реализуется.