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

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?

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

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.

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

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

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

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

Algo assim pode funcionar

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

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.

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

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>

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

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

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

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/

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>

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

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

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>