Wie zu verwenden Jasny Datei-upload mit Bootstrap 3

Also Bootstrap 3 kam gerade heraus. Ich bevorzuge es, Bootstrap 2, aber ich bin derzeit mit Jasny Erweiterung für Datei-uploads. Gibt es eine Möglichkeit, cherry-pick, die Funktion und verwenden Sie es mit Bootstrap 3?

Angesichts der schweren Reihe von änderungen in der Bootstrap-3, ist es sehr unwahrscheinlich, dass es eine einfache Art und Weise. Ich könnte mir vorstellen, Bootstrap 3 Unterstützung wäre schon Recht, es auf Jasny Website, wenn es leicht wäre.
Sie könnten versuchen, mit der "customize" Seite SIEHE HIER, um nur herunterladen, die Datei-Upload-scripts und hinzufügen, dass in Ihrer Bootstrap-3-Projekt. Es könnte funktionieren...
Das plugin (umbenannt in 'Datei-Eingabe') ist jetzt auch verfügbar für Bootstrap-3.

InformationsquelleAutor emersonthis | 2013-08-08

  1. 11

    Wenn Sie möchten, dass nur die Datei-upload-plugin werde ich im Grunde arbeiten finden Sie unter: http://bootply.com/72995

    Könnten Sie zum download des plugins von: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip Sie haben javascript und css-Dateien.
    Oder könnten Sie zum download: die Datei-upload.weniger und file-upload.js Dateien aus http://jasny.github.io/bootstrap/

    Verwenden Sie diese Anleitung: http://www.bootply.com/migrate-to-bootstrap-3, um Ihren html-kompatibel mit Twitters Bootstrap 3. (ändern-Klassen wie input-append in der css-Datei auch).

    Glück

    InformationsquelleAutor Bass Jobsen

  2. 8

    Brauchte dies für ein Projekt, so ist dies, wie ich es Tat. Die gute Nachricht ist die wichtigste änderung ist in der HTML, wie es möglich ist, passen Sie die plugin Bootstrap 3.0, indem Sie nur 5 Zeilen und ändern von 4 anderen in der css des plugins.

    DEMO

    Hier ist die html markup für die Verwendung fileupload mit 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>

    und die Veränderungen der 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*/

    sowie 

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

    Gibt es wahrscheinlich die meisten Optimierungen, die durchgeführt werden können (einige Klassen in das alte css kann gelöscht werden, aber das müsste getestet werden) , verbessern den code, aber das ist, was ich mit für wie es jetzt ist, Recht einfach zu implementieren.

    Interessant. Ich habe gerade die original bootstrap-fileupload.css-und es funktionierte. Was hast du Begegnung, die erforderlichen Anpassungen des css?
    Hier. Überprüfen Sie die "Wählen Sie Datei" linke Grenze: es ist nicht Runde. Dies wird behoben, durch das "sowohl als auch". Versuchen Sie auch, wählen Sie eine Datei mit einem langen Dateinamen und die Größe des Fensters ändern, so dass es eine überlauf. Dies ist durch die Feste css-Ergänzungen.
    auch die Lösung der überlauf passt sich an die neue Art und Weise steuert, reagieren in der Bootstrap-3 - (dynamic volle Breite statt der festen Breite).
    Cool. Ich werde check it out.
    der dialog Datei nicht öffnet für mich mit, dass html?

    InformationsquelleAutor edsioufi

  3. 4

    wenn Sie möchten, dass nur bootstraped Datei-Eingabe mit bootstrap3 können Sie versuchen, diese
    http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/

    InformationsquelleAutor patie

Schreibe einen Kommentar