Como alterar o texto do botão de <input type = "file" />?

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

Eu tentei modificar o value, mas não está funcionando. Como personalizar o texto do botão?

user198729
fonte
Você está falando sobre o nome do arquivo ou o texto do botão?
Artelius
possível duplicata de Como renomear HTML "navegar" no botão?
Ciro Santilli publicou em 8/11/2014

Respostas:

153

Use o Bootstrap FileStyle , que é usado para estilizar os campos de arquivo dos formulários. É um plug-in para uma biblioteca de componentes baseada em jQuery chamada Twitter Bootstrap

Uso da amostra:

Incluir:

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

Via JavaScript:

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

Via atributos de dados:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Fernando Kosh
fonte
Não parece estar funcionando para mim. Ele ainda mostra os botões padrão do responsável. Além disso, a demonstração em github.com/markusslima/bootstrap-filestyle.git também não funciona - todos os exemplos mostram os botões padrão. Estou esquecendo de algo?
Ya.
7
@ Tony Uhh .... o que faz você pensar que o Bootstrap não está usando o "maluco <img /> hack" por baixo também? :-)
Andz
@Ya você pode dizer qual navegador e sua versão? Testado agora no Chrome Versão 43.0.2357.130 (64 bits) no Linux e todos os exemplos funcionam perfeitamente.
Fernando Kosh
20
Jogar uma biblioteca javascript (com um plug-in!) Em um problema tão pequeno é um exagero deselegante.
MKaama 12/09
3
Votado. Nem sequer é uma resposta, apenas uma solução alternativa que precisa de uma biblioteca extra. A resposta deve pretender alterar o comportamento de renderização para navegadores.
Wdetac 12/0618
108

Você pode colocar uma imagem e fazer o seguinte:

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 : No IE9 e IE10, se você ativar o onClick em uma entrada de arquivo via javascript, o formulário será sinalizado como 'perigoso' e não poderá ser enviado com javascript, não tenho certeza se ele pode ser enviado tradicionalmente.

ParPar
fonte
5
Esta é uma solução inteligente. Você também não poderia fazer isso com um elemento <button>?
Código Commander
1
@ Command Code -Obrigado, e sim, você pode fazê-lo com todos os elementos que desejar, mas o mais comum é o elemento <image>. Apenas se livrar do campo botão + texto do "arquivo de entrada" ...
ParPar
2
Apenas para quem usa o acima, alguns navegadores móveis desativam o acionamento de cliques na entrada de arquivos programaticamente. Especificamente, o Android 4 para o Galaxy S III
newshorts
Eu estou usando <input type="file" dentro da linha asp.net gridview, cujas linhas podem ser adicionadas dinamicamente .. portanto, será realmente difícil chamar o acionador de clique de entrada relevante (da mesma linha) enquanto clica em uma imagem! : /
sohaiby
sua solução não funciona. Você prolly não definiu fronteira, margem, estofamento e background-color ou ou então seria óbvio
yan Bellavance
88

Oculte a entrada do arquivo. Crie uma nova entrada para capturar um evento de clique e encaminhe-o para a entrada oculta:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
MushyPeas
fonte
jogando em um arquivo HTA com o modo ie7 eu tive que remover o ;no final.
ATek
ótimo, não quero incluir o bootstrap apenas para alterar duas palavras do texto, mas como você faria isso se a entrada do arquivo fosse criada dinamicamente?
Asparism
@asparism use JavaScript para manipular o DOM, oculte-o definindo seu estilo e use before () e adicione o novo elemento de entrada?
MushyPeas
3
@MushyPeas é a maneira mais fácil. tentei jogar com css, mas esta solução é muito mais rápida e fácil. graças
Mara
2
Esta foi a maneira mais fácil para mim também! Ele também me permitiu ESTILO o botão de arquivo 'falso' como uma das outras opções de botão de formulário - sem ter que me preocupar em exibir o botão de arquivo "Procurar" de aparência estranha.
Harry Mantheakis
47

O texto "upload file ..." é predefinido pelo navegador e não pode ser alterado. A única maneira de contornar isso é usar um componente de upload baseado em Flash ou Java, como o swfupload .

Pekka
fonte
3
Você pode provar que não pode ser alterado?
User198729
Ou navegando nos códigos-fonte dos navegadores, pelo menos nos códigos-fonte aberto.
Pekka
Isso pode ser feito pela resposta (para outra pergunta, algo como "Por que o conteúdo do valor 'VALUE =" C: \ someFile.txt "' para um campo de entrada do tipo arquivo, 'TYPE =" FILE "', ignorado por o navegador? "): stackoverflow.com/questions/1342039
Peter Mortensen
23

Funciona perfeitamente em todos os navegadores Espero que funcione para você também.

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

Mude content: 'Select some files';com o texto que você deseja''

Se não estiver trabalhando com o Firefox, use-o em vez da entrada:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Code Black
fonte
Funciona no Safari, embora
Cullub
Você está executando o problema de compatibilidade entre navegadores, consulte o CSS BOX MODEL para minimizar o problema.
Code Black
1
O problema é provavelmente que o FF é construído no Gecko, não no webkit. (meu melhor palpite)
Cullub 07/12/15
2
<label id = "addButton" for = "Upload" style = "cor do plano de fundo: # 000; cor: #fff; preenchimento: 4px; raio da borda: 4px; família de fontes: monoespaço;" > Escolha algum arquivo </label> <input id = "Upload" type = "file" multiple = "multiple" name = "_ fotos" accept = "image / *" style = "visible: hidden">
Código Preto
4
OK, obrigado! Confira este JSFiddle . Se você editar a sua resposta com isso, eu acho que é digno de um upvote :)
Cullub
10

Este é um plug-in JQuery para alterar o texto do botão de um elemento do arquivo de entrada.

Exemplo de HTML:

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

Exemplo JS:

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

Resultado:

resultado do plugin

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

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

websky
fonte
9

Simplesmente

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

[Editar com trecho]

<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
fonte
Tente ver o que eu fiz aqui jsfiddle.net
Ken Karlo
Obrigado, exatamente o que eu queria :)
Garth Baker
7

Eu acho que é isso que você quer:

<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"> 
Chit
fonte
3

Edição : Eu vejo agora pelos comentários que você está perguntando sobre o texto do botão, e não o caminho do arquivo. Foi mal. Deixarei minha resposta original abaixo, caso alguém que se depara com essa pergunta a interprete da maneira que eu originalmente fiz.

2ª EDIÇÃO : Excluí esta resposta porque decidi não entender a pergunta e minha resposta não era relevante. No entanto, comentários em outra resposta indicaram que as pessoas ainda queriam ver essa resposta, então eu a estou excluindo.

MINHA RESPOSTA ORIGINAL (eu pensei que o OP estava perguntando sobre o caminho, não o texto do botão):

Este não é um recurso suportado por razões de segurança . O navegador Opera usado para suportar isso, mas foi removido. Pense no que seria possível se isso fosse suportado; Você pode criar uma página com uma entrada de upload de arquivo, preenchê-la previamente com um caminho para algum arquivo confidencial e, em seguida, enviar automaticamente o formulário usando javascript acionado pelo onloadevento. Isso aconteceria muito rápido para o usuário fazer algo a respeito.

Asaph
fonte
3

Use <label>para a legenda

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

Isso funciona sem nenhum javascript . Você pode decorar o rótulo com qualquer grau de complexidade, de acordo com o conteúdo do seu coração. Quando você clica no rótulo, o clique é redirecionado automaticamente para a entrada do arquivo. A entrada do arquivo em si pode ser invisível por qualquer método. Se você deseja que o rótulo apareça como um botão, existem muitas soluções, por exemplo:

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

    text-decoration: none;
    color: initial;
}
MKaama
fonte
2

Somente classe CSS e 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
fonte
1
  1. Antes disso <input type="file">, adicione uma imagem e <input style="position:absolute">ela ocupará o espaço de<input type="file">
  2. Use o seguinte CSS para o elemento file

    position:relative;  
    opacity:0;  
    z-index:99;
Bibaswann Bandyopadhyay
fonte
0

se você estiver usando trilhos e tiver problemas para aplicá-lo, gostaria de adicionar algumas dicas da resposta original postada por @Fernando Kosh

  • Faça o download do arquivo zip e copie o arquivo bootstrap-filestyle.min.js na pasta app / assets / javascripts /
  • abra seu application.js e adicione esta linha abaixo

    // = requer bootstrap-filestyle.min

  • abra seu café e adicione esta linha

    $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Seu texto aqui", ícone: false});

widjajayd
fonte
0

Você pode simplesmente adicionar algum truque de css. você não precisa de javascript ou mais arquivos de entrada e eu mantenho o atributo de valor existente . você precisa adicionar apenas css . você pode tentar esta solução.

.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
fonte
0

Aqui está uma maneira de "alterar" o texto de uma entrada com o tipo de arquivo, com HTML e javascript puro:

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

para mim, não funciona o texto personalizado com bootstrap-filestyle . Ele ajuda na decoração dos botões, mas é estranho alterar o texto, antes de começar a lutar com o css, tente o seguinte:

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

bootstrap-filestyle processa o componente como extensão com uma classe denominada butonText, portanto, quando o documento é carregado, basta alterar o texto. fácil e deve funcionar em todos os navegadores.

Felicidades

Boris Ch.F
fonte
0

Eu fiz assim no meu projeto:

.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
fonte
-1

Esta é uma solução alternativa que pode ser útil para você. Isso oculta o texto que aparece fora do botão, misturando-o com a cor de fundo da div. Depois, você pode atribuir ao div o título que desejar.

<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
fonte
No Chrome 39, vejo o texto UPLOAD IMAGE e o botão <input>. Talvez o manuseio de entradas de arquivos pelo chrome tenha mudado desde que você postou isso?
EricP
@ yan-bellavance o que você está fazendo? Se você acha que uma resposta é incorreta ou não é útil, faça voto negativo, mas de maneira alguma a desfaça!
Kaiido