Altere a opção “Nenhum arquivo escolhido”:

92

Eu tenho um botão "Escolher arquivo" como segue (estou usando Jade, mas deve ser o mesmo que Html5):

 input(type='file', name='videoFile')

No navegador, é exibido um botão com um texto ao lado "Nenhum arquivo escolhido". Gostaria de alterar o texto "Nenhum arquivo escolhido" para outra coisa, como "Nenhum vídeo escolhido" ou "Escolha um vídeo, por favor". Segui as primeiras sugestões aqui:

Não quero ver 'nenhum arquivo escolhido' para um campo de entrada de arquivo

Mas fazer isso não mudou o texto:

 input(type='file', name='videoFile', title = "Choose a video please")

Alguém pode me ajudar a descobrir onde está o problema?

FranXh
fonte
encontre a resposta aqui stackoverflow.com/questions/12035400/…
Mahmoud Farahat
1
@MahmoudFarahat Não quero removê-lo, quero mudar o texto
FranXh
Você não pode remover o texto e colocar um rótulo de espaço reservado ao lado dele?
Roger Lipscombe,
Há uma resposta muito organizada para isso em outro post. stackoverflow.com/a/21842275/3653494
P-Bagels
é muito possível: verifique esta solução rápida - inclui outras coisas, basta rolar até o final do CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7
darga33

Respostas:

18

Tenho certeza de que você não pode alterar os rótulos padrão dos botões, eles são codificados nos navegadores (cada navegador renderizando as legendas dos botões à sua maneira). Confira este artigo de estilo de botão

Jeremy Thille
fonte
6
Não é o rótulo do botão, é o "Nenhum arquivo escolhido" ao lado dele. Quando eu escolho um arquivo, ele muda de Nenhum arquivo escolhido para fileName.something. Portanto, acredito que deve ser mutável.
FranXh
@JeremyThille porque pessoas são pessoas.
amn
220

Oculte a entrada com css, adicione um rótulo e atribua-o ao botão de entrada. O rótulo será clicável e, quando clicado, abrirá a caixa de diálogo do arquivo.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Em seguida, defina o estilo do rótulo como um botão, se desejar.

SKManX
fonte
1
Isso funciona até no IE9, onde você não pode ocultar o file inpute clicar nele do JavaScript. Obrigado!
huysentruitw
1
Isso é ótimo. Elegância hackity. Adoro.
Ben
3
Ótima solução, essa deve ser a resposta aceita.
Multitut
1
Ótima solução, ele ainda permite uma maneira fácil de personalizar o campo
SAFAD
8
Solução html interessante, mas ruim para a usabilidade. O usuário sempre verá "Selecionar arquivo" ou equivalente, mesmo depois de selecionar um arquivo.
Cthulhu
26

Tente isso é apenas um truque

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

Como funciona

É muito simples. o elemento Label usa a tag "for" para fazer referência a um elemento de formulário por id. Nesse caso, usamos "img" como a chave de referência entre eles. Uma vez feito isso, sempre que você clicar no rótulo, ele acionará automaticamente o evento de clique de elemento do formulário, que é o evento de clique de elemento de arquivo em nosso caso. Em seguida, tornamos o elemento do arquivo invisível usando display: none e not visibility: hidden para que não crie um espaço vazio.

Aproveite a codificação

Odin
fonte
2
Você pode tornar essa resposta melhor explicando como ela funciona.
dorukayhan de
Parece que arrastar arquivos não funciona quando você faz isso.
fonZ de
16

http://jsfiddle.net/ZDgRG/

Veja o link acima. Eu uso css para ocultar o texto padrão e uso um rótulo para mostrar o que quero:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};
Tommy Steimel
fonte
13

Certo, não há como remover este 'nenhum arquivo escolhido', mesmo se você tiver uma lista de arquivos pré-carregados.

A solução mais simples que encontrei (e funciona no IE, FF, CR) é a seguinte

  1. Oculte sua entrada e adicione um botão 'arquivos'
  2. em seguida, chame o botão 'arquivos' e peça a ele para vincular fileupload (estou usando JQuery neste exemplo)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

Está feito, funciona perfeitamente :)

Fred

Frederic
fonte
7

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

Ifeanyi Chukwu
fonte
Isso está funcionando de maneira muito eficaz, pois ocultará o texto próximo à entrada do arquivo.
sempre um aprendiz
6

Mas se você tentar remover esta dica de ferramenta

<input type='file' title=""/>

Isso não vai funcionar. Aqui está meu pequeno truque para resolver isso, tente o título com um espaço. Vai funcionar.:)

<input type='file' title=" "/>
simon
fonte
Testei no Chrome e em todos os navegadores. Está funcionando bem. Você pode testar e verificar.
simon
4
Testado novamente no Chrome, Safari, Firefox. Não funciona.
AdamInTheOculus
Eu verifico no Chrome versão 56.0.2924.87 ele está funcionando perfeitamente bem. Qual versão você está usando? @PantsMagee
simon
Ele apenas adiciona uma dica de ferramenta com o texto que você definiu no titleatributo, como vejo
Fyodor
3

Algo assim pode funcionar

input(type='file', name='videoFile', value = "Choose a video please")
Kevin lynch
fonte
3

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

Nota: Btn btn-primary é uma classe de botão de bootstrap. No entanto, o botão pode parecer estranho na posição. Espero que você possa corrigi-lo por css inline.

Naeem Moavia Siddiqui
fonte
3
 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});
.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>

Raj Chavan
fonte
Como faço para que o texto "Selecionar logotipo da empresa" seja exibido abaixo do botão e não no lado direito ??
alex
3

usando rótulo com texto do rótulo alterado

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

adicionar jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>
Kelvin Kantaria
fonte
2

Basta alterar a largura da entrada. Por volta de 90px

<input type="file" style="width: 90px" />

Nwillo
fonte
1
É simples e funciona bem. Apenas a largura é 100px; :)
Sachin Shah
1
<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

e o css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}
Ir Calif
fonte
1
entrada [tipo = "arquivo"] {cor: transparente; cor de fundo: # F89406; borda: 2px sólido # 34495e; largura: 100%; altura: 36px; raio da borda: 3px; }
Ir Calif
1

Você pode tentar desta forma:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

Para mostrar o arquivo selecionado:

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

Obrigado a @ azar13 por obter o nome do arquivo selecionado

Aqui está trabalhando violino:

http://jsfiddle.net/eamrmoc7/

gatinho
fonte
0

Isso ajudará você a alterar o nome para "nenhum arquivo, escolha Selecionar foto do perfil"

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

fonte
o botão sumiu.
Diansheng,
isso funcionou muito bem para mim. O botão foi removido, mas ao clicar na caixa de diálogo de abertura de arquivos de rótulo, você pode estilizar para rotular para torná-lo semelhante a um botão. Ele livrou-se do irritante texto "Nenhum arquivo escolhido".
NoBullMan
0

Eu usaria "botão" em vez de "rótulo", espero que isso ajude alguém.

Isso exibirá apenas um botão, o usuário clicado irá abrir o seletor de arquivo, após a escolha do arquivo, carregue automaticamente.

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
Amos
fonte
0

você pode usar o seguinte código css para ocultar (nenhum arquivo escolhido)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

VERIFIQUE SE A COR ESTÁ CORRESPONDENTE À COR DE FUNDO

Midz Elwekil
fonte
-1

Há um bom exemplo (que inclui validação de tipo de arquivo) em:

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

É basicamente uma versão mais desenvolvida da ideia de Amos de usar um botão.

Tentei várias das sugestões acima sem sucesso (mas talvez seja eu).

Estou propondo-o a fazer uma conversão de arquivo do Excel usando

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
DLyons
fonte
Então isso foi rejeitado por quê? Talvez porque em um post totalmente não relacionado eu sugeri que era fácil fazer votos negativos automáticos, mas muito menos fácil ser construtivo?
DLyons de