javascript - style - input type=file show only button

input type file image

Question

¿Hay alguna manera de estilo (o secuencia de comandos) <input type=file /> elemento para tener visible solo el botón "Buscar" sin campo de texto?

Gracias

Editar : Solo para aclarar por qué necesito esto. Estoy usando código de carga de varios archivos desde http://www.morningz.com/?p=5 y no necesita campo de entrada de texto porque nunca tiene valor. La secuencia de comandos simplemente agrega el archivo recientemente seleccionado a la colección en la página. Se vería mucho mejor sin campo de texto, si es posible.

Answer 1

Acabo de diseñar un archivo de entrada con ancho: 85px, y el campo de texto desapareció en absoluto

Answer 2

Aquí está mi buen ol ''remedio:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById(''myFile'').click();">Browse</button>

Al menos funcionó en Safari.

Simple y simple.

Answer 3

Aquí hay una versión simplificada de la popular solución de @ ampersandre que funciona en todos los principales navegadores. Asp.NET markup

<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 disparador de clic oculto "UploadButton" para la devolución de datos del servidor con estándar. Con el texto "Subir archivo", el control de entrada queda fuera de la vista en el divisor de envoltura cuando se desborda, por lo que no es necesario aplicar ningún estilo para la div del control de "entrada de archivo". El selector $ ([id $ = "FileInput"]) permite la sección de identificadores con los prefijos ASP.NET estándar aplicados. El valor del cuadro de texto de FilePath en establecer desde el código del servidor detrás de hdnFileName.Value una vez que se carga el archivo.

Answer 4

Aquí hay varias opciones válidas, pero pensé que daría lo que se me ocurrió al intentar 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);
}

Answer 5

Así que esta es la mejor manera de hacerlo 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>

Answer 6

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 solo elemento DOM. A esto hay que sumar que muchos navegadores tienen su propia apariencia distintiva para la entrada de archivos, 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 puede salirse con la suya al poner su entrada en un elemento contenedor (como un div) y agregar un margen negativo al elemento. Ocultando eficazmente la parte del cuadro de texto fuera de la pantalla. Otra opción sería utilizar la técnica en el artículo que he vinculado, para tratar de darle un estilo similar a un botón.

Answer 7

Estaba teniendo un gran problema tratando de lograr esto. No quería utilizar una solución Flash, y ninguna de las bibliotecas jQuery que miré era confiable en todos los navegadores.

Creé mi propia solución, que se implementa completamente en CSS (excepto por el cambio de estilo onclick para hacer que el botón aparezca ''hecho clic'').

Puedes 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 mediante la creación de una entrada de archivo grande (con tamaño de fuente: 50px), 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 este div "ventana". Al div se le puede dar una imagen de fondo o color, 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.

Answer 8

Este código HTML solo muestra 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>

Answer 9

Esto funciona para mí:

input[type="file"] {
color: white!important;
}

Answer 10

La respuesta de tmanthey es bastante buena, excepto que no puedes jugar con ancho de borde en Firefox v20. Si ve el link (demo, realmente no se puede mostrar aquí), resolvió el problema usando font-size = 23px, transform: translate (-300px, 0px) scale (4) para Firefox para agrandar 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.

Answer 11

Oculte el elemento del archivo de entrada y cree un botón visible que activará el evento click 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();}
);
});

Answer 12

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 en ella, se activará 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

Answer 13

Otra manera fácil de hacer esto. Cree una etiqueta de "archivo de tipo de entrada" en html y ocúltela. A continuación, haga clic en un botón y formatéelo de acuerdo con las necesidades. Después de esto, use javascript / jquery para hacer clic 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 de JS que funciona para lo mismo: - http://jsfiddle.net/32na3/

Answer 14

Para mí, la forma más sencilla 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>

Answer 15

Perdí mi día hoy para 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 de JQuery sin cuadro de texto. Entonces, 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 diseñar completamente. En el siguiente ejemplo, la entrada del archivo está oculta debajo del 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>

Answer 16

Puede enviar el evento click en una entrada de archivo oculto 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>

Answer 17

Puede etiquetar una imagen para que al hacer 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.

Answer 18

Resuelto con el siguiente código:

<div style="overflow: hidden;width:83px;"> <input style=''float:right;'' name="userfile" id="userfile" type="file"/> </div>

Answer 19

Sé que esta es una publicación anterior, pero una forma sencilla de hacer que el texto desaparezca es simplemente establecer el color del texto en el de tu fondo.

por ejemplo, si su fondo de entrada de texto es blanco, entonces:

input[type="file"]{
color:#fff;
}

Esto no afectará al texto Elegir archivo que seguirá siendo negro debido al navegador.

Answer 20

Solución para trabajar en todos los navegadores RESUELTO:

 <input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById(''imagefile'').click();">
<input id = "imagefile" type="file" style=''visibility: hidden;'' name="img"/>

Probé en FF, Chrome e IE, también trabajé con estilos aplicados: D

Answer 21

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 está ocultando el campo de texto variará de manera obvia entre los navegadores, variará entre los temas de Windows XP, etc. Sin embargo, ¿es algo con lo que puedes trabajar? ...

Answer 22

Todas estas respuestas son bonitas, pero el CSS no funcionará, ya que no es el 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 volverse a crear 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);

Answer 23

Traté de implementar las dos mejores soluciones, 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 ...

Answer 24

Utilicé parte del código recomendado anteriormente y después de muchas horas de faltar a mi tiempo, finalmente llegué a una solución libre de bolsa 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/>

Answer 25

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.

Answer 26

mi solución es solo establecerla dentro de un div como "druveen" dijo, sin embargo, agregué mi propio estilo de botón al div (lo hice ver como un botón con un: hover) y simplemente configuré el estilo "opacity: 0;" a la entrada. Me encanta, espero que haga lo mismo por ti.

Answer 27

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 :)

Answer 28

<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;
});

Answer 29

<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 :)