Jak zmienić tekst przycisku <input type = „file” />?

257
<input type="file" value="Browse" name="avatar" id="id_avatar" />

Próbowałem zmodyfikować value, ale to nie działa. Jak dostosować tekst przycisku?

użytkownik198729
źródło
Czy mówisz o nazwie pliku lub tekście przycisku?
Artelius,
możliwy duplikat Jak zmienić nazwę przycisku „Przeglądaj” HTML?
Ciro Santilli 8 冠状 病 六四 事件 法轮功

Odpowiedzi:

153

Użyj Bootstrap FileStyle , który służy do stylizowania pól plików formularzy. Jest to wtyczka do biblioteki komponentów opartej na jQuery o nazwie Twitter Bootstrap

Przykładowe użycie:

Zawierać:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Przez JavaScript:

$(":file").filestyle();

Poprzez atrybuty danych:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Fernando Kosh
źródło
Wydaje się, że nie działa dla mnie. Nadal pokazuje domyślne przyciski przeglądarki. Demo na github.com/markusslima/bootstrap-filestyle.git też nie działa - wszystkie przykłady pokazują domyślne przyciski. Czy coś brakuje?
.
7
@ Tony Uhh .... co sprawia, że ​​uważasz, że Bootstrap nie używa również „wacky <img /> hack” pod spodem? :-)
Andz
@ Czy możesz powiedzieć, która wersja przeglądarki i jej wersja? Przetestowane teraz na Chrome w wersji 43.0.2357.130 (64-bit) na Linuksie i wszystkie przykłady działają idealnie.
Fernando Kosh,
20
Rzucanie biblioteki javascript (z wtyczką!) Na tak mały problem to nieelegancki przesada.
MKaama,
3
Doceniony. To nawet nie jest odpowiedź, tylko obejście wymagające dodatkowej biblioteki. Odpowiedź powinna zmierzać do zmiany sposobu renderowania w przeglądarkach.
wdetac
108

Możesz zamiast tego umieścić obraz i zrobić to w następujący sposób:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : W IE9 i IE10, jeśli uruchomisz onClick w pliku wejściowym za pomocą javascript, formularz zostanie oznaczony jako „niebezpieczny” i nie może zostać przesłany za pomocą javascript, nie jestem pewien, czy można go przesłać tradycyjnie.

PARPAR
źródło
5
To sprytne rozwiązanie. Czy nie możesz tego zrobić również za pomocą elementu <button>?
Code Commander
1
@Code Commander - Dzięki, i tak, możesz to zrobić z każdym elementem, który chcesz, ale najczęściej jest to element <image>. Wystarczy pozbyć się przycisku + pola tekstowego „wprowadzania pliku” ...
ParPar
2
Tylko niektóre osoby, które korzystają z powyższego rozwiązania, niektóre przeglądarki mobilne wyłączają programowo uruchamianie kliknięć pliku. W szczególności Android 4 dla Galaxy S III
newshorts
Używam <input type="file" wewnątrz wiersza widoku siatki asp.net, którego wiersze można dodawać dynamicznie .. więc prawdziwym bólem w głowie będzie wywołanie odpowiedniego wyzwalacza kliknięcia wejściowego (tego samego rzędu) podczas klikania obrazu! : /
sohaiby
twoje rozwiązanie nie działa. Nie ustawiłeś granicy, marginesu, wypełnienia i koloru tła, bo inaczej byłoby to oczywiste
yan bellavance
88

Ukryj wejście pliku. Utwórz nowe dane wejściowe, aby zarejestrować zdarzenie kliknięcia i przesłać je do ukrytego wejścia:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
MushyPeas
źródło
wrzucając plik HTA w trybie ie7 musiałem usunąć ;na końcu.
ATek
świetnie, nie chcę uwzględniać bootstrapu tylko po to, żeby zmienić dwa słowa tekstu, ale jak byś to zrobił, gdyby dane wejściowe do pliku były tworzone dynamicznie?
asparizm
@asparism używać JavaScript do manipulowania DOM, ukryć go, ustawiając jego styl i użyć przed () i dodać nowy element wejściowy?
MushyPeas,
3
@MushyPeas to najprostszy sposób. próbowałem grać z css, ale to rozwiązanie jest znacznie szybsze i łatwiejsze. dzięki
Mara
2
To też był dla mnie najłatwiejszy sposób! Pozwoliło mi to również STYLOWAĆ „próbny” przycisk pliku jako jedną z innych opcji przycisku formularza - bez obawy o wyświetlanie dziwnie wyglądającego przycisku „Przeglądaj”.
Harry Mantheakis,
47

Tekst „prześlij plik ...” jest wstępnie zdefiniowany w przeglądarce i nie można go zmienić. Jedynym sposobem na obejście tego jest użycie komponentu wysyłającego opartego na Flashu lub Javie, takiego jak swfupload .

Pekka
źródło
3
Czy możesz udowodnić, że nie można tego zmienić?
user198729,
Lub przeglądając kody źródłowe przeglądarek, przynajmniej te otwarte.
Pekka
Może to wynikać z odpowiedzi (na inne pytanie, na przykład „Dlaczego wartość ma wartość” „VALUE =„ C: \ someFile.txt ”” dla pola wejściowego pliku typu „TYPE =„ FILE ””, ignorowane przez przeglądarka? ”): stackoverflow.com/questions/1342039
Peter Mortensen
23

Pracuje idealnie na wszystkich przeglądarkach Mam nadzieję, że to też zadziała.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Zmiana content: 'Select some files'; z tekstem, który chcesz w sobie''

JEŚLI NIE DZIAŁA Z firefox, użyj tego zamiast danych wejściowych:

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Kod Czarny
źródło
Działa jednak w Safari
Cullub,
Działa idealnie na moim końcu na moim FF 41.0.2. Pracujesz, aby rozwiązać problem ze zgodnością z różnymi przeglądarkami, zapoznaj się z MODELEM BOX CSS, aby zminimalizować problem.
Code Black,
1
Problemem jest prawdopodobnie to, że FF jest zbudowany na Gecko, a nie na webkicie. (moje najlepsze przypuszczenie)
Cullub,
2
<label id = "addButton" for = "Upload" style = "kolor tła: # 000; kolor: #fff; wypełnienie: 4px; promień obramowania: 4px; rodzina czcionek: monospace;" > Wybierz jakiś plik </label> <input id = "upload" type = "file" multiple = "multiple" name = "_ photos" accept = "image / *" style = "visibility: hidden">
Code Black
4
Ok dzięki! Sprawdź to JSFiddle . Jeśli edytujesz w ten sposób swoją odpowiedź, myślę, że warto ją pochwalić :)
Cullub,
10

To jest wtyczka JQuery do zmiany tekstu przycisku elementu pliku wejściowego.

Przykładowy HTML:

<input type="file" id="choose-file" />

Przykład JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Wynik:

wynik wtyczki

datchung
źródło
9
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

więcej http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

websky
źródło
8

Po prostu

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Edytuj za pomocą fragmentu]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

Ken Karlo
źródło
Spróbuj zobaczyć, co zrobiłem tutaj jsfiddle.net
Ken Karlo
Dzięki, dokładnie to, co chciałem :)
Garth Baker
7

Myślę, że tego właśnie chcesz:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 
Pętak
źródło
3

EDYCJA : Widzę teraz w komentarzach, że pytasz o tekst przycisku, a nie ścieżkę do pliku. Mój błąd. Zostawię swoją oryginalną odpowiedź poniżej na wypadek, gdyby ktoś, kto natknie się na to pytanie, zinterpretuje to tak, jak ja pierwotnie.

2. EDYCJA : Usunąłem tę odpowiedź, ponieważ zdecydowałem, że źle zrozumiałem pytanie, a moja odpowiedź nie była istotna. Jednak komentarze w innej odpowiedzi wskazywały, że ludzie nadal chcieli zobaczyć tę odpowiedź, więc ją cofam.

MOJA ORYGINALNA ODPOWIEDŹ (Myślałem, że OP pyta o ścieżkę, a nie tekst przycisku):

To nie jest obsługiwana funkcja ze względów bezpieczeństwa . Przeglądarka internetowa Opera używała tego, ale została usunięta. Zastanów się, co byłoby możliwe, gdyby było to obsługiwane; Możesz utworzyć stronę z danymi wejściowymi do przesłania pliku, wstępnie wypełnić ją ścieżką do poufnego pliku, a następnie automatycznie przesłać formularz za pomocą javascript wyzwalanego przez onloadzdarzenie. Stałoby się to zbyt szybko, aby użytkownik mógł cokolwiek z tym zrobić.

Asaf
źródło
3

Użyj <label>do podpisu

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Działa to bez żadnego javascript . Możesz ozdobić etykietę o dowolnym stopniu złożoności, według własnego serca. Po kliknięciu etykiety kliknięcie zostanie automatycznie przekierowane do pliku wejściowego. Sam plik wejściowy może być niewidoczny za pomocą dowolnej metody. Jeśli chcesz, aby etykieta wyglądała jak przycisk, istnieje wiele rozwiązań, np .:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
MKaama
źródło
2

Tylko klasa CSS i bootstrap

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>
mahmood kabi
źródło
1
  1. Wcześniej <input type="file">dodaj obraz <input style="position:absolute">, który zajmie miejsce<input type="file">
  2. Użyj następującego CSS do elementu pliku

    position:relative;  
    opacity:0;  
    z-index:99;
Bibaswann Bandyopadhyay
źródło
0

jeśli używasz szyn i masz problem ze stosowaniem go, chciałbym dodać kilka wskazówek z oryginalnej odpowiedzi opublikowanej przez @Fernando Kosh

  • Pobierz plik zip i skopiuj plik bootstrap-filestyle.min.js ke folder app / asset / javascripts /
  • otwórz plik application.js i dodaj ten wiersz poniżej

    // = wymaga bootstrap-filestyle.min

  • otwórz swoją kawę i dodaj tę linię

    $ („: plik”). filestyle ({buttonName: „btn-primary”, buttonBefore: true, buttonText: „Twój tekst tutaj”, ikona: fałsz});

widjajayd
źródło
0

Możesz po prostu dodać sztuczkę css. Państwo nie trzeba javascript lub więcej plików wejściowych i zachować istniejący atrybut wartość . musisz dodać tylko css . możesz wypróbować to rozwiązanie.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }
<input type="file" class="btn-file-upload" value="Uploadfile" />

Udara Kasun
źródło
0

Oto sposób na „zmianę” tekstu danych wejściowych o typie pliku, czystym HTML i javascript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>
IntelarX
źródło
0

dla mnie nie działa niestandardowy tekst z bootstrap-filestyle . Pomaga w ozdabianiu guzików, ale tekst jest dziwny do zmiany, zanim zacznę zapasy z css, spróbuję:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle renderuje komponent jako rozpiętość za pomocą klasy o nazwie butonText, więc po załadowaniu dokumentu wystarczy zmienić tekst. łatwe w prawo i musi działać na wszystkich przeglądarkach.

Twoje zdrowie

Boris Ch.F
źródło
0

Zrobiłem to tak dla mojego projektu:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Khapi
źródło
-1

Jest to alternatywne rozwiązanie, które może ci pomóc. Ukrywa to tekst, który pojawia się poza przyciskiem, mieszając go z kolorem tła div. Następnie możesz nadać divowi tytuł, który ci się spodoba.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>
jarimos
źródło
W przeglądarce Chrome 39 widzę zarówno tekst WYŚLIJ OBRAZ, jak i przycisk <wejście>. Być może obsługa danych wejściowych plików w Chrome zmieniła się od czasu, gdy to opublikowałeś?
EricP
@ yan-bellavance co robisz? Jeśli uważasz, że odpowiedź jest niepoprawna lub nie jest pomocna, zgłoś ją, ale w żaden sposób nie zniechęcaj!
Kaiido