¿Cambiar el texto predeterminado en el tipo de entrada = "archivo"?
Quiero cambiar el texto predeterminado en el botón que es " Choose File" cuando lo usamos input="file".
¿Cómo puedo hacer esto? Además, como puede ver en la imagen, el botón está en el lado izquierdo del texto. ¿Cómo puedo ponerlo en el lado derecho del texto?
Utilice el foratributo de labelpara input.
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
A continuación se muestra el código para obtener el nombre del archivo cargado.
$("#files").change(function() {
filename = this.files[0].name;
console.log(filename);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
Creo que esto es lo que quieres:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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">
</body>
</html>
Cada navegador tiene su propia interpretación del control y, como tal, no se puede cambiar ni el texto ni la orientación del control.
Hay algunos "tipos" de trucos que quizás quieras probar si quieres unaHTML/CSSsolución en lugar de un Flash oluz plateadasolución.
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Personalmente, debido a que la mayoría de los usuarios se apegan al navegador de su elección y, por lo tanto, probablemente estén acostumbrados a ver el control en la representación predeterminada, probablemente se confundirían si vieran algo diferente (dependiendo de los tipos de usuarios con los que esté tratando). .
Esto podría ayudar a alguien en el futuro, puede diseñar la etiqueta de la entrada como desee y poner lo que quiera dentro de ella y ocultar la entrada sin mostrar nada.
Funciona perfectamente en cordova con iOS
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">
Para lograr esto, el botón de entrada predeterminado debe ocultarse usando display:nonela propiedad CSS y se agrega un nuevo elemento de botón para reemplazarlo, para que podamos personalizarlo como queramos.
Con arranque
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Optional text here
<label for="inputField" class="btn btn-info">Try me</label>
<input type="file" id="inputField" style="display:none">Con jQuery
En este caso, el onclickatributo agregado al elemento del botón indica a JavaScript que haga clic en el botón de entrada predeterminado oculto cada vez que se haga clic en el botón visible.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Optional text here
<button style="cursor:pointer" onclick="$('#inputField').click()">Click me</button>
<input type="file" id="inputField" style="display:none">JavaScript simple con detector de eventos
document.getElementById('btn').addEventListener('click', () => {
document.getElementById('inputField').click();
})Optional text here
<button style="cursor:pointer" id="btn">Click me</button>
<input type="file" id="inputField" style="display:none">