javascript - tipo de entrada=file mostrar solo botón
¿Hay alguna manera de dar estilo (o guionizar) el elemento <input type=file /> para que solo sea visible el botón "Examinar" sin el campo de texto?
Gracias
Editar: Solo para aclarar por qué necesito esto. Estoy usando un código de carga múltiple de archivos de http://www.morningz.com/?p=5 y no necesita un campo de texto porque nunca tiene valor. El script simplemente agrega el archivo recién seleccionado a la colección en la página. Se vería mucho mejor sin el campo de texto, si es posible.
Respuesta #1
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Esto seguramente funcionará ya que lo he usado en mis proyectos.
Respuesta #2
Estaba teniendo un gran problema tratando de lograr esto. No quería usar una solución en Flash, y ninguna de las bibliotecas de jQuery que revisé era confiable en todos los navegadores.
Se me ocurrió mi propia solución, que está implementada completamente en CSS (excepto por el cambio de estilo onclick para que el botón aparezca 'clickeado').
Puedes probar un ejemplo funcional aquí: http://jsfiddle.net/VQJ9V/307/ (Probado en FF 7, IE 9, Safari 5, Opera 11 y Chrome 14)
Funciona creando un gran campo de entrada (con font-size:50px), luego envolviéndolo en un div que tiene un tamaño fijo y overflow:hidden. El campo de entrada solo es visible a través de este div "ventana". Al div se le puede asignar una imagen de fondo o color, se puede agregar texto y el campo de entrada se puede hacer transparente para revelar el fondo del div:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
Déjame saber si hay algún problema con esto y trataré de solucionarlo.
Respuesta #3
Perdí mi día hoy intentando hacer que esto funcionara. No encontré que ninguna de las soluciones aquí funcionara en ninguno de mis escenarios.
Entonces recordé que vi un ejemplo de JQuery File Upload sin cuadro de texto. Así que lo que hice fue que tomé su ejemplo y lo reduje a la parte relevante.
Esta solución al menos funciona para IE y FF y se puede estilizar completamente. En el ejemplo de abajo, el campo de archivo está oculto bajo el elegante botón "Agregar archivos".
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>
Respuesta #4
Intenté implementar las dos soluciones principales, y terminó siendo una GRAN pérdida de tiempo para mí. Al final, aplicar esta clase .css resolvió el problema...
input[type='file'] {
color: transparent;
}
¡Hecho! súper limpio y súper simple...
Respuesta #5
Agrega una etiqueta label con el atributo for y asigna el valor del atributo for al botón de entrada de archivo.
Ahora, cuando hagas clic en la etiqueta, el navegador abrirá automáticamente el cuadro de diálogo de exploración de archivos.
Nota: Oculta el botón de entrada de archivo usando CSS.
Consulta la demostración en vivo a continuación.
$('#imageUpload').change(function() {
readImgUrlAndPreview(this);
function readImgUrlAndPreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').removeClass('hide').attr('src', e.target.result);
}
};
reader.readAsDataURL(input.files[0]);
}
});.hide {
display: none;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ddd;
box-shadow: 2px 2px 10px #eee;
border-radius: 4px;
}
.btn-large {
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#imagePreview {
margin: 15px 0 0 0;
border: 2px solid #ddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div clas="file_input_wrap">
<input type="file" name="imageUpload" id="imageUpload" class="hide" />
<label for="imageUpload" class="btn btn-large">Select file</label>
</div>
<div class="img_preview_wrap">
<img src="" id="imagePreview" alt="Preview Image" width="200px" class="hide" />
</div>Respuesta #6
Oculta el elemento de archivo de entrada y crea un botón visible que activará el evento de clic de ese archivo de entrada.
Prueba esto:
CSS
#file { width:0; height:0; }
HTML :
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>
JAVASCRIPT(jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});
Respuesta #7
Eso va a ser muy difícil. El problema con el tipo de entrada de archivo es que generalmente consiste en dos elementos visuales, mientras se trata como un solo elemento del DOM. Súmale a eso que varios navegadores tienen su propio aspecto y sensación distintos para la entrada de archivo, y estarás preparado para una pesadilla. Consulta este artículo en quirksmode.org sobre las peculiaridades que tiene la entrada de archivo. Te garantizo que no te hará feliz (hablo por experiencia).
[EDITAR]
En realidad, creo que podrías salirte con la tuya poniendo tu entrada en un elemento contenedor (como un div), y agregando un margen negativo al elemento. Efectivamente ocultando la parte del cuadro de texto fuera de la pantalla. Otra opción sería usar la técnica en el artículo que enlacé, para intentar darle estilo como un botón.
Respuesta #8
Arreglar para que funcione en todos los navegadores
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>
He probado en FF, Chrome e IE - funciona bien, también apliqué los estilos :D
Respuesta #9
Aquí está mi buen viejo remedio:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
Al menos funcionó en Safari.
Liso y simple.
Respuesta #10
Otra manera fácil de hacer esto. Hacer una etiqueta "input type file" en HTML y esconderla. Luego hacer clic en un botón y formatearlo según sea necesario. Después de esto, usar JavaScript/jQuery para hacer clic programáticamente en la etiqueta de entrada cuando se haga clic en el botón.
HTML :-
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>
JavaScript :-
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});
jQuery :-
$('#button').click(function(){
$('#file').click();
});
CSS :-
#button
{
background-color: blue;
color: white;
}
Aquí hay un JS fiddle funcionando para lo mismo :- http://jsfiddle.net/32na3/