¿Cómo cambiar el nombre del botón HTML "examinar" de un tipo de entrada = archivo?

Question

Cómo cambiar el nombre del botón de búsqueda como "Seleccione el archivo"? Ej .:

<input type=file name=browse > 

Answer 1

El botón no se le llama el "botón Examinar" - eso es sólo el nombre de su navegador da para ello. Los navegadores son libres de implementar el control de carga de archivos como deseen. En Safari, por ejemplo, se llama "Elegir archivo" y está en el lado opuesto de lo que probablemente esté usando.

Puede implementar una apariencia personalizada para el control de carga usando the technique outlined on QuirksMode, pero eso va más allá de simplemente cambiar el texto del botón.

Answer 2

La entrada type = "archivo" de campo es muy complicado porque se comporta de manera diferente en todos los navegadores, no puede ser de estilo, o puede ser de estilo un poco, dependiendo del navegador una vez más; y es difícil cambiar el tamaño (dependiendo del navegador nuevamente, puede tener un tamaño mínimo que no se puede sobrescribir).

Aunque hay algunas soluciones. El mejor es en mi opinión this one (el resultado es here).

Answer 3

No, no puede cambiar el texto de la entrada de carga de archivos. Pero hay algunos trucos para superponer una imagen sobre el botón.

Answer 4

AFAIK no puede cambiar el texto del botón, está codificado en los navegadores.

Sin embargo, hay varias soluciones para poner un botón de texto/imagen distinta con una forma:

link

Answer 5

También puede usar Uploadify, que es un gran plugin de carga de jQuery, le permite cargar varios archivos y también estilo los campos del archivo fácilmente. http://www.uploadify.com

Answer 6

Un poco de JavaScript se encargará de que:

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
    var textinput = document.getElementById("filename"); 
    textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

No es la mejor solución en busca, pero funciona.

Answer 7

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
} 
function Handlechange() 
{ 
var fileinput = document.getElementById("browse"); 
var textinput = document.getElementById("filename"); 
textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

http://jsfiddle.net/J8ekg/

Answer 8

Puede hacerlo con una simple solución css/JQ: Crear un botón falso que desencadena el botón de exploración que está oculto.

HTML

<input type="file"/> 
<button>Open</button> 

CSS

input { display: none } 

jQuery

$('button').click(function(e) { 
    e.preventDefault(); // prevents submitting 
    $('input').trigger('click'); 
}); 

demo

Answer 9

1. Wrap el <input type="file"> con una etiqueta <label>;
2. Agregue una etiqueta (con el texto que necesita) dentro de la etiqueta, como <span> o <a>;
3. Haga que esta etiqueta parezca un botón;
4. Hacer input[type="file"] invisible a través de display: none.