Jak korzystać z przesyłania pliku Jasny z Bootstrap 3

Question

Tak więc Bootstrap 3 właśnie wyszedł. Wolę go od Bootstrap 2, ale obecnie używam Jasny's extension do przesyłania plików. Czy jest jakiś sposób, aby wybrać tę funkcję i użyć jej z Bootstrap 3?

Answer 1

Gdy chcesz tylko plugin przesyłania plików i będzie działać w zasadzie, patrz: http://bootply.com/72995

Można pobrać wtyczkę od: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip Będziesz dostał JavaScript i CSS pliki potrzebne. Albo można pobrać: plik-upload.less i formaty plików-upload.js od http://jasny.github.io/bootstrap/

używać tego przewodnika: http://www.bootply.com/migrate-to-bootstrap-3 aby twój html zgodny z Bootstrap 3. (zajęcia zmian Twitter niczym wejścia dołączyć w css plik też).

Powodzenia

Answer 2

Potrzebowałem tego do projektu, więc tak to zrobiłem. Dobra wiadomość jest główną zmianą w HTML, ponieważ możliwe jest dostosowanie wtyczki do Bootstrap 3.0 poprzez dodanie tylko 5 linii i modyfikację 4 innych w wersji css wtyczki.

DEMO

Oto html znaczników za korzystanie umiszczanie plików z 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> 

i zmiany w 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*/ 

jak

/*==================================*/ 
/*.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; 
} 
/*==================================*/ 

Najprawdopodobniej możliwe są optymalizacje (niektóre klasy w starym css można usunąć, ale trzeba to przetestować), aby poprawić kod, ale to jest to, czego teraz używam, ponieważ jest całkiem łatwe do wdrożenia.

Answer 3

jeśli chcesz bootstraped tylko wejście plików z bootstrap3 można spróbować tego
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/