Miksi ei ole hienoa tiedostoelementin latauspainiketta twitter bootstrapille? Olisi suloista, jos sininen ensisijainen painike toteutettaisiin latauspainikkeeksi. Onko upload-painiketta edes mahdollista hienosäätää CSS:llä? (vaikuttaa selaimen alkuperäiseltä elementiltä, jota ei voi manipuloida).
Se sisältyy Jasnyn bootstrapin haaraan.
Yksinkertainen latauspainike voidaan luoda käyttämällä
<span class="btn btn-file">Upload<input type="file" /></span>
Fileupload-lisäosan avulla voit luoda kehittyneempiä widgettejä. Tutustu http://jasny.github.io/bootstrap/javascript/#fileinput
Upload-painikkeiden tyylittely on hankalaa, koska se tyylittelee syötettä eikä painiketta.
Mutta voit käyttää tätä temppua:
http://www.quirksmode.org/dom/inputfile.html
Yhteenveto:
Ota normaali <input type="file">
ja laita se elementtiin, jossa on position: relative
.
Lisää tähän samaan vanhempaan elementtiin normaali <input>
ja kuva, joilla on oikeat tyylit. Sijoita nämä elementit absoluuttisesti niin, että ne ovat samassa paikassa kuin <input type="file">
.
Aseta <input type="file">
:n z-indeksi arvoon 2, jotta se on tyylitellyn syötteen/kuvan päällä.
Aseta lopuksi <input type="file">
:n peittävyydeksi 0. <input type="file">
:stä tulee nyt käytännössä näkymätön, ja tyylitelty syöttö/kuva näkyy läpi, mutta voit silti napsauttaa "Selaa" -painiketta. Jos painike sijoitetaan kuvan päälle, käyttäjä näyttää klikkaavan kuvaa ja saa normaalin tiedostonvalintaikkunan. (Huomaa, että et voi käyttää visibility: hidden -asetusta, koska todella näkymätön elementti on myös napsauttamaton, ja tarvitsemme <input type="file">:n pysyvän napsautettavana.)
Toimii minulle:
// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
// <input class="nice_file_field" type="file" data-label="Choose Document">
// <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
$.fn.niceFileField = function() {
this.each(function(index, file_field) {
file_field = $(file_field);
var label = file_field.attr("data-label") || "Choose File";
file_field.css({"display": "none"});
nice_file_block_text = '<div class="input-group nice_file_block">';
nice_file_block_text += ' <input type="text" class="form-control">';
nice_file_block_text += ' <span class="input-group-btn">';
nice_file_block_text += ' <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
nice_file_block_text += ' </span>';
nice_file_block_text += '</div>';
file_field.after(nice_file_block_text);
var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
var nice_file_block_element = file_field.parent().find(".nice_file_block");
nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
file_field.change( function(){
nice_file_block_element.find("input").val(file_field.val());
});
});
};
})( jQuery );