Zmienić domyślny tekst w typie wprowadzania = „plik”?

183

Chcę zmienić domyślny tekst przycisku „ Choose File”, gdy go używamy input="file".

wprowadź opis zdjęcia tutaj

W jaki sposób mogę to zrobić? Jak widać na obrazku, przycisk znajduje się po lewej stronie tekstu. Jak mogę umieścić go po prawej stronie tekstu?

html file input default-value Harry Joy
źródło

Czy istnieje możliwość zmiany tego tekstu na zmienny?

kicaj

1

Odpowiedz przez ParPar tu jest chyba to, czego szukasz: stackoverflow.com/questions/1944267/... .

Aniket Suryavanshi

możliwy duplikat Jak zmienić nazwę przycisku „Przeglądaj” HTML typu wejściowego = plik? dla części tekstowej, dla ogólnego stylu: stackoverflow.com/questions/572768/…

Ciro Santilli 8 冠状病六四事件法轮功

Wypróbuj to rozwiązanie: stackoverflow.com/a/30275263/1657573

Michael Tarimo

Możliwy duplikat Jak zmienić tekst przycisku <input type = "file" />?

Bae

49

Każda przeglądarka ma własną wersję kontrolki i jako taka nie można zmienić tekstu ani orientacji kontrolki.

Istnieje kilka hacków, które możesz wypróbować, jeśli chcesz HTML/css rozwiązanie zamiast Flasha lub silverlightrozwiązanie.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Osobiście, ponieważ większość użytkowników trzyma się wybranej przeglądarki i dlatego prawdopodobnie przyzwyczajeni są do kontrolki w domyślnej wersji, prawdopodobnie wpadliby w zamieszanie, gdyby zobaczyli coś innego (w zależności od typów użytkowników, z którymi masz do czynienia) .

Shiv Kumar
źródło

177

Użyj "for"atrybutu labeldla input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

Poniżej znajduje się kod do pobrania nazwy przesłanego pliku

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>

Rozwiń fragment kodu

algometrix
źródło

20

display:nonemoże być używany na WEJŚCIU, aby nie zajmował niepotrzebnego miejsca.

Mistrz DJon

2

Dziękuję Ci. To działało idealnie i dokładnie tego szukałem.

Chris - Jr

Działa dobrze na komputerach Mac z Chrome, FF i Safari. Jeśli robi to również w IE, jest to najlepsza i najprostsza opcja do stylowania przycisku wprowadzania pliku. Dzięki!

Pod

5

działa dobrze, tylko nieznaczne negatywne jest to, że użytkownik nie widzi nazwy pliku, który został wybrany podczas wyboru.

luke_mclachlan

2

@ Mike Zaktualizował post, aby pobrać nazwę pliku

algometrix

29

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

</html>

Rozwiń fragment kodu

1Cr18Ni9
źródło

27

Może to pomóc komuś w przyszłości, możesz stylizować etykietę wejścia według własnego uznania i umieszczać w nim wszystko, co chcesz, i ukrywać dane wejściowe bez wyświetlania żadnych.

Działa idealnie na Cordova z iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

Rozwiń fragment kodu

Paulo Mogollón
źródło

1

najlepsze rozwiązanie, jakie znalazłem do tej pory! +1

danyo

7

To niemożliwe. W przeciwnym razie może być konieczne użycie kontroli przesyłania Silverlight lub Flash.

Anuraj
źródło

1

Co nie jest możliwe Zmieniasz tekst lub umieszczasz przycisk po prawej, czy oba?

Harry Joy,

13

Głosowałem za tym, ponieważ uważam, że głosowanie nad odpowiedzią jest niesprawiedliwe. Zasadniczo nie można zmienić tekstu przycisku wprowadzania pliku natywnego. „Możliwe rozwiązania” to włamania lub obejścia.

Peter Lee,

10

@PeterLee - Hacki to rozwiązania, niektóre nawet zgodne ze specyfikacją W3C.

Derek 朕會功夫

3

Oto jak możesz to zrobić:

jQuery:

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Kod HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

Tushar Shukla
źródło

3

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

To wciąż najlepsze jak dotąd

oroyo segun
źródło

2

Za pomocą Bootstrap możesz zrobić to tak, jak poniżej kodu.

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

Rana Aalamgeer
źródło

Ten kod nie drukuje z powrotem na stronie internetowej, który plik został wybrany.

tale852150,

2

Zrobiłem skrypt i opublikowałem go na GitHub: get selectFile.js Łatwy w użyciu, możesz go sklonować.

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

PRÓBNY

jsfiddle.net/Thielicious/4oxmsy49/

Thielicious
źródło

2

Aktualizacja 2017:

Przeprowadziłem badania, w jaki sposób można to osiągnąć. A najlepsze wyjaśnienie / samouczek znajduje się tutaj: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Napiszę tutaj streszczenie na wypadek, gdyby stało się niedostępne. Powinieneś mieć HTML:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Następnie ukryj dane wejściowe za pomocą CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Następnie stylizuj etykietę:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Następnie opcjonalnie możesz dodać JS, aby wyświetlić nazwę pliku:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Ale tak naprawdę po prostu przeczytaj samouczek i pobierz wersję demonstracyjną, jest naprawdę dobra.

użytkownik3784950
źródło

1

Użyłbym buttondo uruchomienia input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Szybko i czysto.

Sony Santos
źródło

1

Możesz użyć tego podejścia, działa ono nawet, jeśli wprowadzonych jest wiele plików.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})

.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

Rozwiń fragment kodu

Илья Зеленько
źródło

Podoba mi się to podejście, ale dla mnie tekst wybranego pliku nie pokazuje się, jakiś pomysł, o co chodzi. Jestem Google Chrome

N Khan

1

To powinno działać:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

Andrius
źródło

1

Oto jak to się robi z bootstrapem, tylko ty powinieneś gdzieś umieścić oryginalne wejście ... idk w głowie i usunąć <br>, jeśli go masz, ponieważ jest on tylko ukryty i zajmuje miejsce :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

Rozwiń fragment kodu

Leon Tanko
źródło

0

Pozwól mi dodać hack, którego użyłem. Chciałem mieć sekcję, która pozwoli ci przeciągać i upuszczać pliki, i chciałem, aby ta sekcja przeciągania i upuszczania była klikalna wraz z oryginalnym przyciskiem przesyłania.

Oto jak to wyglądało, kiedy skończyłem (minus zdolność przeciągania i upuszczania, istnieje wiele samouczków, jak to zrobić).

A potem stworzyłem serię postów na blogu , które głównie dotyczą przycisków przesyłania plików.

wp-overwatch.com
źródło

0

Ok, bardzo prosty sposób tworzenia własnego pliku wejściowego.

Używaj etykiet, ale jak wiesz z poprzednich odpowiedzi, etykieta nie wywołuje funkcji onclick w firefoxie, może być błędem, ale nie ma znaczenia w następujących przypadkach.

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

To, co robisz, to stylizowanie etykiety, aby wyglądała tak, jak chcesz

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

teraz po prostu ukryj właściwy przycisk wprowadzania, ale nie możesz go ustawić na visability: hidden

Ustaw się więc niewidocznie opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

teraz, jak pewnie zauważyłeś, mam tę samą klasę na mojej etykiecie, co moje pole wprowadzania, to znaczy dlatego, że chcę, aby oba miały tę samą stylizację, więc gdziekolwiek klikniesz etykietę, faktycznie klikniesz niewidzialną pole wejściowe.

Jadin Hornsby
źródło

0

Moje rozwiązanie ...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

To jest po prostu złe: D

bagatov88
źródło

0

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });

.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

Rozwiń fragment kodu

Rokive
źródło

Zmienić domyślny tekst w typie wprowadzania = „plik”?

Odpowiedzi:

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