¿Hay alguna forma de que el elemento de estilo (o script) <input type=file />tenga visible solo el botón "Examinar" sin campo de texto?
Gracias
Editar : solo para aclarar por qué necesito esto. Estoy usando el código de carga de múltiples archivos de http://www.morningz.com/?p=5 y no necesita un campo de texto de entrada 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 campo de texto, si es posible.
Respuestas:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />Esto seguramente funcionará, lo he usado en mis proyectos. Espero que esto ayude :)
Me estaba divirtiendo muchísimo tratando de lograr esto. No quería usar una solución Flash, y ninguna de las bibliotecas jQuery que miré era confiable en todos los navegadores.
Se me ocurrió mi propia solución, que se implementa completamente en CSS (excepto por el cambio de estilo al hacer clic para hacer que el botón parezca "presionado").
Puede probar un ejemplo de trabajo aquí: http://jsfiddle.net/VQJ9V/307/ (Probado en FF 7, IE 9, Safari 5, Opera 11 y Chrome 14)
Funciona creando una entrada de archivo grande (con tamaño de fuente: 50 px), luego envolviéndola en un div que tiene un tamaño fijo y un desbordamiento: oculto. La entrada solo es visible a través de esta "ventana" div. Al div se le puede dar una imagen o color de fondo, se puede agregar texto y la entrada se puede hacer transparente para revelar el fondo 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)
}Avíseme si hay algún problema e intentaré solucionarlo.
Hoy desperdicié mi día haciendo que esto funcione. No encontré ninguna de las soluciones aquí trabajando en cada uno de mis escenarios.
Entonces recordé que vi un ejemplo para la carga de archivos JQuery sin cuadro de texto. Entonces, lo que hice fue tomar su ejemplo y reducirlo a la parte relevante.
Esta solución al menos funciona para IE y FF y se puede diseñar completamente. En el siguiente ejemplo, la entrada del archivo está oculta 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>Oculte el elemento del archivo de entrada y cree 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();}
);
});Oculte la etiqueta del archivo de entrada con css, agregue una etiqueta y asígnela al botón de entrada. se podrá hacer clic en la etiqueta y, cuando se haga clic, se abrirá el cuadro de diálogo del archivo.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>Agregue el estilo a la etiqueta como un botón.
Demo en vivo
onchangecontrolador al inputpara permitir que un código JS recoja la información del archivo cargado.
Eso va a ser muy difícil. El problema con el tipo de entrada de archivo es que generalmente consta de dos elementos visuales, mientras se trata como un único elemento DOM. Agregue a eso que varios navegadores tienen su propio aspecto distintivo para la entrada del archivo, y está listo para la pesadilla. Vea este artículo en quirksmode.org sobre las peculiaridades que tiene la entrada del archivo. Te garantizo que no te hará feliz (hablo por experiencia).
[EDITAR]
En realidad, creo que podría salirse con la suya introduciendo un elemento contenedor (como un div) y agregando un margen negativo al elemento. Ocultando efectivamente la parte del cuadro de texto fuera de la pantalla. Otra opción sería utilizar la técnica en el artículo que vinculé, para tratar de darle estilo como un botón.
Solución para trabajar en todos los navegadores RESUELTOS:
<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, trabajando bien, estilos aplicados también: D
Traté de implementar las dos soluciones principales, y terminó siendo una enorme pérdida de tiempo para mí. Al final, la aplicación de esta clase .css resolvió el problema ...
input[type='file'] {
color: transparent;
}¡Hecho! super limpio y super simple ...
Otra forma fácil de hacer esto. Haga una etiqueta de "archivo de tipo de entrada" en html y escóndela. Luego haga clic en un botón y formatee según las necesidades. Después de esto, use javascript / jquery para hacer clic programáticamente en la etiqueta de entrada cuando se hace 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 violín JS que funciona para lo mismo: - http://jsfiddle.net/32na3/
Utilicé algunos de los códigos recomendados anteriormente y después de muchas horas de perder mi tiempo, finalmente llegué a una solución libre de bolsas css.
Puede ejecutarlo aquí: http://jsfiddle.net/WqGph/
pero luego encontré una mejor solución: http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>onchangeevento no se activa para el inputelemento oculto .
Puede etiquetar una imagen para que cuando haga clic en ella, se active el evento de clic del botón. Simplemente puede hacer que el botón normal sea invisible:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>Funcionó para mí en todos los navegadores, y es muy fácil de usar.
Puede enviar el evento click en una entrada de archivo oculta como esta:
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); cambiar HTMLEvents a MouseEventsvar ev = document.createEvent('MouseEvents');
HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>JQUERY
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});Espero que esto funcione :)
Tengo una solución realmente hacky con esto ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />El problema es que el atributo de ancho que oculta el campo de texto variará obviamente entre los navegadores, variará entre los temas de Windows XP, etc. ¿Quizás es algo con lo que puedes trabajar? ...
Sé que esta es una publicación antigua, pero una forma simple de hacer que el texto desaparezca es simplemente establecer el color del texto en el fondo.
por ejemplo, si el fondo de entrada de texto es blanco, entonces:
input[type="file"]{
color:#fff;
}Esto no afectará el texto Elegir archivo, que seguirá siendo negro debido al navegador.
Acabo de diseñar un archivo de entrada con ancho: 85 px, y el campo de texto desapareció
Este código HTML solo aparece en el botón Cargar archivo
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form><a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});Para mí, la forma más simple es usar un color de fuente como el color de fondo. Simple, no elegante, pero útil.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>Así que aquí está la mejor manera de hacer esto PARA TODOS LOS NAVEGADORES:
¡Olvídate de CSS!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>Todas estas respuestas son lindas, pero CSS no funcionará, ya que no es lo mismo en todos los navegadores y dispositivos, la primera respuesta que escribí funcionará en todo menos en Safari. Para que funcione en todos los navegadores todo el tiempo, debe crearse dinámicamente y recrearse cada vez que desee borrar el texto de entrada:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);La respuesta de tmanthey es bastante buena, excepto que no puedes jugar con border-width en Firefox v20. Si ve el enlace (demo, realmente no se puede mostrar aquí) resolvieron el problema usando font-size = 23px, transform: translate (-300px, 0px) scale (4) para que Firefox agrande el botón.
Otras soluciones que usan .click () en un div diferente son inútiles si desea convertirlo en un cuadro de entrada de arrastrar y soltar.
Hay varias opciones válidas aquí, pero pensé que daría lo que se me ocurrió al tratar de solucionar un problema similar. http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}Yo escribí esto:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />Funciona bien en todos los navegadores, sin jQuery, sin CSS.
Aquí hay una versión simplificada de la solución popular de @ampersandre que funciona en todos los principales navegadores. Asp.NET marcado
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />Código JQuery
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});código css
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}Utiliza un activador de clics "UploadButton" oculto para la devolución de datos del servidor con estándar. El texto con "Subir archivo" deja el control de entrada fuera de la vista en el contenedor contenedor cuando se desborda, por lo que no es necesario aplicar ningún estilo para el control de "archivo de entrada". El selector $ ([id $ = "FileInput"]) permite la sección de identificadores con prefijos ASP.NET estándar aplicados. El valor del cuadro de texto FilePath se establece desde el código del servidor detrás de hdnFileName.Value una vez que se carga el archivo.