Cambie "No hay archivo elegido":


90

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?



1
@MahmoudFarahat No quiero eliminarlo, quiero cambiar el texto
FranXh

¿No puedes eliminar el texto y colocar una etiqueta de marcador de posición junto a él?
Roger Lipscombe

Hay una respuesta muy ordenada a esto en otra publicación. stackoverflow.com/a/21842275/3653494
P-Bagels

es muy posible: consulte esta solución rápida: incluye otras cosas, simplemente desplácese hasta la parte inferior de CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7
darga33

Respuestas:


17

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


6
No es la etiqueta del botón, es el "No se eligió archivo" al lado. Cuando elijo un archivo, cambia de Ningún archivo elegido a nombreDeArchivo.algo. Entonces creo que debería ser cambiante.
FranXh

@JeremyThille porque las personas son personas.
amn

216

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.


1
Esto incluso funciona en IE9, donde no puede ocultar file inputy hacer clic en JavaScript. ¡Gracias!
huysentruitw

1
Esto es genial. Elegancia hackity. Quiéralo.
Ben

3
Gran solución, esta debería ser la respuesta aceptada.
Multitut

1
Gran solución, incluso permite una manera fácil de personalizar el campo
SAFAD

8
Solución html interesante, pero mala para la usabilidad. El usuario siempre verá "Seleccionar archivo" o equivalente, incluso después de seleccionar un archivo.
Cthulhu

26

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


2
Puede mejorar esta respuesta explicando cómo funciona.
user8397947

Parece que arrastrar archivos no funciona cuando haces esto.
fonZ

16

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

13

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


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


Esto está funcionando de manera muy efectiva, ocultará el texto cerca de la entrada del archivo.
Siempre aprendiz

6

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

Probé en Chrome y en todos los navegadores. Funciona bien. ¿Puede probarlo y verificarlo?
Simon

4
Probado nuevamente en Chrome, Safari, Firefox. No funciona.
AdamInTheOculus

Verifico en Chrome Versión 56.0.2924.87 que está funcionando perfectamente bien. ¿Qué versión estás usando? @PantsMagee
simon

Simplemente agrega información sobre herramientas con el texto que estableció en el titleatributo, como veo
Fyodor

3

Algo como esto podría funcionar

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

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


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>


¿Cómo puedo conseguir que aparezca el texto "Seleccionar logotipo de la empresa" debajo del botón y no en el lado derecho?
alex

3

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>

2

Simplemente cambie el ancho de la entrada. Alrededor de 90px

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


1
Es simple y funciona bien. Solo el ancho es 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>

y el css

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

1
entrada [tipo = "archivo"] {color: transparente; color de fondo: # F89406; borde: 2px sólido # 34495e; ancho: 100%; altura: 36px; radio del borde: 3px; }
Ir Calif

1

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/


0

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>

el botón se ha ido.
Diansheng

esto funcionó bien para mí. El botón desapareció, pero al hacer clic en la etiqueta abrir archivos, se abre el cuadro de diálogo y puede aplicar estilo a la etiqueta para que parezca un botón. Eliminó el molesto texto "No File Chosen".
NoBullMan

0

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

0

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


-1

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>

Así que esto fue rechazado por qué? ¿Quizás porque en una publicación totalmente ajena sugerí que era fácil hacer votos negativos, pero mucho menos fácil ser constructivo?
DLyons
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.