Cambie "No hay archivo elegido":

Tengo un botón "Elegir archivo" de la siguiente manera (estoy usando Jade pero debería ser el mismo que Html5):

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

En el navegador, esto muestra un botón con un texto al lado "Ningún archivo elegido". Me gustaría cambiar el texto "Ningún archivo elegido" por otro, como "Ningún video elegido" o "Elija un video, por favor". Seguí las primeras sugerencias aquí:

No quiero ver 'ningún archivo elegido' para un campo de entrada de archivo

Pero hacer esto no cambió el texto:

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

¿Alguien puede ayudarme a averiguar dónde está el problema?

Estoy bastante seguro de que no puede cambiar las etiquetas predeterminadas en los botones, están codificadas en los navegadores (cada navegador muestra los subtítulos de los botones a su manera). Consulte este artículo de estilo de botones

Oculte la entrada con css, agregue una etiqueta y asígnela al botón de entrada. se podrá hacer clic en la etiqueta y, cuando se haga clic, se abrirá el cuadro de diálogo del archivo.

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

Luego, diseñe la etiqueta como un botón si lo desea.

Prueba esto, es solo un truco

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

Cómo funciona

Es muy simple. el elemento Label usa la etiqueta "for" para hacer referencia al elemento de un formulario por id. En este caso, usamos "img" como clave de referencia entre ellos. Una vez hecho esto, cada vez que hace clic en la etiqueta, se activa automáticamente el evento de clic del elemento del formulario, que es el evento de clic del elemento de archivo en nuestro caso. Luego hacemos que el elemento del archivo sea invisible usando display: none y not visible: hidden para que no cree un espacio vacío.

Disfruta codificando

http://jsfiddle.net/ZDgRG/

Vea el enlace anterior. Utilizo css para ocultar el texto predeterminado y uso una etiqueta para mostrar lo que quiero:

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

Correcto, no hay forma de eliminar este 'archivo no elegido', incluso si tiene una lista de archivos precargados.

La solución más simple que he encontrado (y funciona en IE, FF, CR) es la siguiente

1. Ocultar su entrada y agregar un botón de 'archivos'
2. luego llame al botón 'archivos' y pídale que vincule fileupload (estoy usando JQuery en este ejemplo)

$('.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á hecho, funciona perfectamente :)

Fred

Pero si intenta eliminar esta información sobre herramientas

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

Esto no funcionará. Aquí está mi pequeño truco para trabajar esto, pruebe el título con un espacio. Funcionará.:)

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

Algo como esto podría 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 es una clase de botón de arranque. Sin embargo, el botón puede parecer desgastado en su posición. Espero que puedas solucionarlo mediante CSS en línea.

 .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 la etiqueta con el texto de la etiqueta cambiado

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

agregar jquery

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

Simplemente cambie el ancho de la entrada. Alrededor 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>

y el css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

Puedes probarlo de esta manera:

<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 el archivo seleccionado:

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

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

Gracias a @ unlucky13 por obtener el nombre de archivo seleccionado

Aquí está el violín de trabajo:

http://jsfiddle.net/eamrmoc7/

Esto le ayudará a cambiar el nombre de "ningún archivo elija Seleccionar imagen de perfil"

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

Usaría "botón" en lugar de "etiqueta", espero que esto ayude a alguien.

Esto solo mostrará un botón, el usuario hizo clic en el selector de archivos emergente, después de que el archivo elija, se cargará automáticamente.

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

puede usar el siguiente código CSS para ocultar (no se elige ningún archivo)

HTML

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

CSS

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

ASEGÚRESE DE QUE EL COLOR COINCIDE CON EL COLOR DE FONDO

Hay un buen ejemplo (que incluye la validación del tipo de archivo) en:

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

Es básicamente una versión completa de la idea de Amos de usar un botón.

Probé varias de las sugerencias anteriores sin éxito (pero tal vez ese sea yo).

Lo estoy reutilizando para hacer una conversión de archivo de 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>