¿Cómo cambiar el texto del botón de <input type = "file" />?

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

Traté de modificar el value, pero no funciona. ¿Cómo personalizar el texto del botón?

usuario198729
fuente
¿Estás hablando del nombre del archivo o del texto del botón?
Artelius
posible duplicado de ¿Cómo cambiar el nombre del botón "navegar" HTML?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Respuestas:

153

Use Bootstrap FileStyle , que se usa para aplicar estilo a los campos de archivo de los formularios. Es un complemento para una biblioteca de componentes basada en jQuery llamada Twitter Bootstrap

Uso de la muestra:

Incluir:

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

Vía JavaScript:

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

Vía atributos de datos:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Fernando Kosh
fuente
No parece estar funcionando para mí. Todavía muestra los botones predeterminados del procesador. Además, la demostración en github.com/markusslima/bootstrap-filestyle.git tampoco funciona: todos los ejemplos muestran los botones predeterminados. ¿Me estoy perdiendo de algo?
Ya.
77
@ Tony Uhh ... ¿qué te hace pensar que Bootstrap no está usando el "truco loco <img />" que está debajo también? :-)
Andz
@Ya, ¿puedes decir qué navegador y qué versión? Probado ahora en Chrome Versión 43.0.2357.130 (64 bits) en Linux y todos los ejemplos funcionan perfectamente.
Fernando Kosh
20
Lanzar una biblioteca de JavaScript (con un complemento) en un problema tan pequeño es una exageración poco elegante.
MKaama
3
Voto negativo Ni siquiera es una respuesta, solo una solución alternativa que necesita una biblioteca adicional. La respuesta debe tener la intención de cambiar el comportamiento de representación para los navegadores.
wdetac
108

En su lugar, puede poner una imagen y hacerlo así:

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 : en IE9 e IE10 si activa onClick en una entrada de archivo a través de javascript, el formulario se marcará como 'peligroso' y no se puede enviar con javascript, no estoy seguro de si se puede enviar tradicionalmente.

ParPar
fuente
55
Esta es una solución inteligente. ¿No podrías hacer esto también con un elemento <button>?
Code Commander el
1
@Code Commander -Gracias, y sí, puedes hacerlo con todos los elementos que quieras, pero el más común es el elemento <image>. Simplemente elimine el botón + campo de texto de la "entrada de archivo" ...
ParPar
2
Solo un aviso para cualquiera que use lo anterior, algunos navegadores móviles deshabilitan la activación de clics de entrada de archivos mediante programación. Específicamente, Android 4 para el Galaxy S III
novedades
Estoy usando <input type="file" dentro de asp.net gridview row, cuyas filas se pueden agregar dinámicamente ... por lo que será un verdadero dolor de cabeza llamar al disparador de clic de entrada relevante (de la misma fila) al hacer clic en una imagen. : /
sohaiby
Su solución no funciona. Usted prolly no estableció borde, margen, relleno y color de fondo o de lo contrario sería obvio
Yan Bellavance
88

Ocultar la entrada del archivo. Cree una nueva entrada para capturar un evento de clic y reenvíelo a la entrada oculta:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
Puré de guisantes
fuente
lanzando un archivo HTA con el modo ie7 tuve que eliminar ;al final.
ATek
genial, no quiero incluir bootstrap solo para cambiar dos palabras de texto, pero ¿cómo lo haría si la entrada de archivo se creara dinámicamente?
asparismo
@asparism usa JavaScript para manipular el DOM, ocultarlo configurando su estilo y usar before () y agregar el nuevo elemento de entrada?
MushyPeas
3
@MushyPeas es la forma más fácil. Intenté jugar con CSS pero esta solución es mucho más rápida y fácil. gracias
Mara
2
¡Esta fue la forma más fácil para mí también! También me permitió ESTIRAR el botón de archivo 'simulado' como uno de un conjunto de otras opciones de botón de formulario, sin tener que preocuparme por mostrar el botón de archivo "Examinar" de aspecto extraño.
Harry Mantheakis
47

El texto "subir archivo ..." está predefinido por el navegador y no se puede cambiar. La única forma de evitar esto es usar un componente de carga basado en Flash o Java como swfupload .

Pekka
fuente
3
¿Puedes demostrar que no se puede cambiar?
user198729
O navegando por los códigos fuente de los navegadores, al menos para los de código abierto.
Pekka
Esto podría ser por la respuesta (a otra pregunta, algo como "¿Por qué el contenido del valor, 'VALOR =" C: \ someFile.txt "' para un campo de entrada de archivo de tipo, 'TYPE =" FILE "', ignorado por the browser? "): stackoverflow.com/questions/1342039
Peter Mortensen
23

Funciona perfectamente en todos los navegadores Espero que también funcione para usted.

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

Cambia content: 'Select some files';con el texto que quieras dentro''

SI NO FUNCIONA CON Firefox, use esto en lugar de entrada:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Código negro
fuente
Sin embargo, funciona en Safari
Cullub el
Está funcionando perfectamente a mi fin en mi FF 41.0.2. Está ejecutando un problema de compatibilidad cruzada del navegador, consulte el MODELO CSS BOX para minimizar el problema.
Código Black
1
El problema es probablemente que FF está construido en Gecko, no en webkit. (mi mejor suposición)
Cullub
2
<label id = "addButton" for = "Upload" style = "background-color: # 000; color: #fff; padding: 4px; border-radius: 4px; font-family: monospace;" > Elija algún archivo </label> <input id = "Upload" type = "file" multiple = "multiple" name = "_ photos" accept = "image / *" style = "visibilidad: oculto">
Código negro
44
¡OK gracias! Echa un vistazo a este JSFiddle . Si editas tu respuesta con eso, creo que es digno de un
voto a favor
10

Este es un complemento de JQuery para cambiar el texto del botón de un elemento de archivo de entrada.

HTML de ejemplo:

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

Ejemplo JS:

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

Resultado:

resultado del complemento

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

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

websky
fuente
9

Simplemente

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

[Editar con fragmento]

<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
fuente
Intenta ver lo que hice aquí jsfiddle.net
Ken Karlo
Gracias, exactamente lo que quería :)
Garth Baker
7

Creo que esto es lo que quieres:

<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"> 
Vale
fuente
3

EDITAR : ahora veo por los comentarios que está preguntando sobre el texto del botón, y no sobre la ruta del archivo. Culpa mía. Dejaré mi respuesta original a continuación en caso de que alguien que se tope con esta pregunta la interprete de la manera en que lo hice originalmente.

2nd EDIT : había borrado esta respuesta porque decidí que no entendía la pregunta y mi respuesta no era relevante. Sin embargo, los comentarios en otra respuesta indicaron que la gente todavía quería ver esta respuesta, así que la estoy recuperando.

MI RESPUESTA ORIGINAL (pensé que el OP estaba preguntando sobre la ruta, no el texto del botón):

Esta no es una característica compatible por razones de seguridad . El navegador web Opera solía admitir esto, pero se eliminó. Piense en lo que sería posible si esto fuera compatible; Puede hacer una página con una entrada de carga de archivos, rellenarla previamente con una ruta a algún archivo confidencial y luego enviar automáticamente el formulario usando javascript activado por el onloadevento. Esto sucedería demasiado rápido para que el usuario haga algo al respecto.

Asaph
fuente
3

Usar <label>para el subtítulo

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

Esto funciona sin javascript . Puede decorar la etiqueta a cualquier grado de complejidad, al contenido de su corazón. Cuando hace clic en la etiqueta, el clic se redirige automáticamente a la entrada del archivo. La entrada del archivo en sí puede hacerse invisible por cualquier método. Si desea que la etiqueta aparezca como un botón, hay muchas soluciones, por ejemplo:

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

    text-decoration: none;
    color: initial;
}
Makama
fuente
2

Solo clases CSS y 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
fuente
1
  1. Antes de eso <input type="file">, agregue una imagen y <input style="position:absolute">ocupará el espacio de<input type="file">
  2. Use el siguiente CSS para el elemento de archivo

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

si usa rieles y tiene problemas para aplicarlo, me gustaría agregar algunos consejos de la respuesta original publicada por @Fernando Kosh

  • Descargue el archivo zip y copie el archivo bootstrap-filestyle.min.js ke folder app / assets / javascripts /
  • abra su application.js y agregue esta línea a continuación

    // = requiere bootstrap-filestyle.min

  • abre tu café y agrega esta línea

    $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Su texto aquí", icono: falso});

widjajayd
fuente
0

Simplemente puede agregar algún truco css. usted no necesita javascript archivos de entrada o más y sigo atributo de valor existente . solo necesita agregar css . Puedes probar esta solución.

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

Aquí hay una manera de "cambiar" el texto de una entrada con tipo de archivo, con HTML puro y JavaScript:

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

para mí no funciona el texto personalizado con bootstrap-filestyle . Ayuda con la decoración del botón, pero es extraño cambiar el texto, antes de comenzar a luchar con css, intento lo siguiente:

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

bootstrap-filestyle representa el componente como span con una clase llamada butonText, por lo que cuando se carga el documento, simplemente cambie el texto. derecho fácil y debe funcionar en todos los navegadores.

salud

Boris Ch.F
fuente
0

Lo hice así para mi proyecto:

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

Esta es una solución alternativa que puede ser de ayuda para usted. Esto oculta el texto que aparece fuera del botón, mezclándolo con el color de fondo del div. Luego puedes darle al div un título que te guste.

<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
fuente
En Chrome 39, veo el texto CARGAR IMAGEN y el botón <input>. ¿Quizás el manejo de Chrome de las entradas de archivos ha cambiado desde que publicaste esto?
EricP
@ Yan-Bellavance, ¿qué estás haciendo? Si cree que una respuesta es incorrecta o no es útil, vote en contra, ¡pero de ninguna manera la desfigura!
Kaiido