<typ wejściowy = "plik"> - style niestandardowe/css

Question

Czy jest jakiś sposób, aby zmienić wygląd <input type="file"> we wszystkich przeglądarkach za pomocą niektórych stylów CSS?

Answer 1

Quirksmode.org ma ciekawy artykuł o tym: http://www.quirksmode.org/dom/inputfile.html

Answer 2

Try This -

1. wziąć normalny i umieścić go w elemencie z position: relative.
2. Do tego samego elementu nadrzędnego dodaj normalny i obraz, który ma poprawne style. Pozycję tych elementów absolutnie, dzięki czemu zajmują to samo miejsce, co .
3. Ustaw indeks Z na 2, tak aby leżał na górze stylizowanego wejścia/obrazu.
4. Wreszcie, ustawić przezroczystość 0. teraz staje się skuteczne niewidoczny, a style wejścia/obraz prześwituje, ale nadal może kliknąć na przycisk „Przeglądaj” . Jeśli przycisk jest ustawiony na u góry obrazu, użytkownik kliknie obraz, a przejdzie do normalnego okna wyboru pliku . (Zauważ, że nie możesz użyć widoczności ukrytej, ponieważ niewidoczny element naprawdę jest niewidoczny , też, i musimy pozostać klikalnym) Do tego czasu efekt może być osiągnięty przez czysty CSS. Jednak wciąż brakuje jednej funkcji.
5. Gdy użytkownik wybrał plik, widoczne, fałszywe pole wejściowe powinno pokazać poprawną ścieżkę do tego pliku, jako normalny będzie. Jest to po prostu kwestia skopiowania nowej wartości do fałszywego pola wejściowego , ale potrzebujemy kodu JavaScript, aby wykonać tę operację pod .

Więcej szczegółów - http://www.quirksmode.org/dom/inputfile.html

Answer 3

Mógłbyś spróbować użyć SWFUpload, projekt open source, który osadza mały plik Flash na stronie zamiast wejścia plików ... Można użyć CSS do stylu przycisk, który wyzwala wysyłanie flasha, jak tylko chcesz.

Minus: praca może być trudna i oczywiście użytkownicy muszą mieć flash.

Upside: wiele plików można wybrać jednocześnie w oknie dialogowym przesyłania!

Answer 4

można po prostu ustawić własny przycisk wprowadzania plików. wystarczy ustawić atrybut CSS elementu wejściowego na style="display:none" i obsłużyć zdarzenie kliknięcia w javascript. dalsze czytanie: Using hidden file input elements using the click() method

EDYCJA: okazuje się, że to już nie działa ze względów bezpieczeństwa. mały hack to właśnie ustawić styl css na visibility:hidden. Tutaj jest JSFiddle gdzie umieszczam moje pole <input> gdzieś na końcu mojej strony i wyzwalam openFileDialog z elementem <a>.

//html 
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" /> 

//js 
$("#openFile").on("click", function() { 
    //throws an error if browser doesn't support file upload 
    checkFileApiCompatibility(); 

    //opens File Dialog 
    $("#openFileDialog").click(); 
    $("#openFileDialog").on('change', function(){ 
     openFile(this); 
    }); 
});