Botón de carga de archivos de etiquetado

Question

¿Cómo puedo internacionalizar el texto del botón del selector de archivos? Por ejemplo, lo que este código presenta al usuario:

<input type="file" .../> 

Answer 1

Normalmente es proporcionada por el navegador y difícil de cambiar, por lo que la única manera de evitar que será un CSS/JavaScript Hack,

Ver los siguientes enlaces para algunos enfoques:

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
• http://www.quirksmode.org/dom/inputfile.html
• http://www.dreamincode.net/forums/showtopic15621.htm

Answer 2

Obtiene el idioma de su navegador para su botón. No hay forma de cambiarlo programáticamente.

Answer 3

pude lograr un botón usando jquery mobile con el siguiente código:

<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label> 
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/> 

Por encima de código crea un "Subir" botón (texto de encargo). Al hacer clic en el botón de carga, se inicia el examen del archivo. Probado con Chrome 25 & IE9.

Answer 4

Para crear una solución personalizada de "botón de exploración" simplemente intente hacer un botón de exploración oculto, un botón o elemento personalizado y algo de Jquery. De esta forma, no estoy modificando el "botón de exploración" real que depende de cada navegador/versión. He aquí un HTML example.

:

<div id="import" type="file">My Custom Button</div> 
<input id="browser" class="hideMe" type="file"></input> 

CSS:

#import { 
    margin: 0em 0em 0em .2em; 
    content: 'Import Settings'; 
    display: inline-block; 
    border: 1px solid; 
    border-color: #ddd #bbb #999; 
    border-radius: 3px; 
    padding: 5px 8px; 
    outline: none; 
    white-space: nowrap; 
    -webkit-user-select: none; 
    cursor: pointer; 
    font-weight: 700; 
    font: bold 12px/1.2 Arial,sans-serif !important; 
    /* fallback */ 
    background-color: #f9f9f9; 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727)); 
} 

.hideMe{ 
    display: none; 
} 

JS:

$("#import").click(function() { 
    $("#browser").trigger("click"); 
    $('#browser').change(function() { 
      alert($("#browser").val()); 
    }); 
}); 

Answer 5

Dar un paso atrás! En primer lugar, está asumiendo que el usuario está utilizando una configuración regional en su dispositivo, lo cual no es una buena suposición para justificar tomar el texto del botón del selector de archivos, y hacer que diga quiere hacerlo.

Es razonable que desee controlar cada elemento del lenguaje visible en su página. El contenido del control File Upload no es parte del HTML. Hay más contenido detrás de este control, por ejemplo, en WebKit, también dice "No hay archivo elegido" al lado del botón.

hay soluciones muy hacky que tratan este (por ejemplo, como los mencionados en la respuesta de @ ChristopheD), pero ninguno de ellos realmente tienen éxito:

• Para un lector de pantalla, el control de archivos seguirá diciendo "Examinar. .. "o" Elegir archivo ", y una carga de archivo personalizada no se anunciará como un control de carga de archivos, sino solo como un botón o una entrada de texto.
• Muchos de ellos no muestran el archivo elegido, o para mostrar que el usuario ya no eligió un archivo
• Muchos de ellos no se parecen en nada al control nativo, por lo que pueden parecer extraños en dispositivos no estándar.
• El soporte del teclado es generalmente pobre.
• Un componente de UI creado por el autor nunca puede ser tan funcional como su equivalente nativo (y cuanto más lo comprenda para suponer IE10 en Windows 7, más se apartará de otras combinaciones de navegador y sistema operativo).
• Los navegadores modernos admiten la resistencia & para colocar en el control de carga de archivos nativos.
• Algunas técnicas pueden desencadenar la heurística en el software de seguridad como un posible intento de 'hacer clic en el conector' para engañar al usuario para que cargue el archivo.

desviarse de los controles nativos siempre es algo arriesgado, hay toda una serie de diferentes dispositivos de sus usuarios podrían estar utilizando, y cualquiera que sea solución que elija, no se han puesto a prueba en cada uno de esos dispositivos.

Sin embargo, hay una razón aún mayor por la que todos los intentos fallan desde la perspectiva de la experiencia del usuario: hay aún más contenido no localizado detrás de este control, el cuadro de diálogo de selección de archivos. Una vez que el usuario está sujeto a atravesar su sistema de archivos o lo que no debe seleccionar un archivo para cargar, estará sujeto a la configuración regional del sistema operativo host.

¿Estás seguro de que le estás haciendo justicia a tu usuario al desviarse del control nativo, solo para localizar el texto, cuando tan pronto como lo hagan clic, simplemente obtendrán la configuración regional del sistema operativo de todos modos?

Lo mejor que puede hacer por sus usuarios es asegurarse de tener una guía localizada adecuada alrededor del control de entrada de archivos. (por ejemplo, etiqueta de campo de formulario, texto de sugerencia, texto de información sobre herramientas).

Lo siento. :-(

-

Esta respuesta es para aquellos que buscan una justificación no para localizar el control de carga de archivos

Answer 6

solución CSS puro:

.inputfile { 
 
    /* visibility: hidden etc. wont work */ 
 
    width: 0.1px; 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.inputfile:focus + label { 
 
    /* keyboard navigation */ 
 
    outline: 1px dotted #000; 
 
    outline: -webkit-focus-ring-color auto 5px; 
 
} 
 
.inputfile + label * { 
 
    pointer-events: none; 
 
}

<input type="file" name="file" id="file" class="inputfile" /> 
 
<label for="file">Choose a file (Click me)</label>

.

fuente: http://tympanus.net/codrops

uso

Answer 7

mucho más fácil que

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" /> 
<input type="file" style="display:none;" id="file" name="file"/>