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

<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ż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.">

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.

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"/>

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 .

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">

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:

<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/

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>

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"> 

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ć.

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;
}

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>

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;

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});

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" />

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>

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

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;">

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>