tipo de entrada = botón mostrar solo archivo

154

¿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.

javascript html css Andrija
fuente

169

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

shiba
fuente

1

Esta respuesta es tan simple y elegante y ha funcionado para todos los navegadores.

Mike.C.Ford

Esta es, con mucho, la mejor solución que he encontrado. Elimina un comportamiento de estilo de entrada de archivo realmente peculiar con diferentes navegadores móviles. Ahora mi control de entrada de archivo no se destaca como un dolor de pulgar con el resto de mi diseño. Muchas gracias, ojalá pudiera votar más de 1.

Highdown

... y agregue onchange = "this.form.submit ();" al elemento de archivo de entrada para comenzar a cargar después de la selección del archivo. No olvides envolver todos los elementos con la etiqueta Form.

Tomás

1

Esto no funcionará en IE8 y versiones posteriores, ya que cuando envíe el formulario obtendrá un error de acceso denegado (no puede activar entradas de archivos con js en IE8 y versiones inferiores por "razones de seguridad")

usuario poco entusiasta

3

@unenthusiasticuser correcto y no funcionará en ipad por la misma razón de seguridad. :)

Mahi

80

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.

ampersandre
fuente

44

esta fue la mejor solución que encontré que funcionó con todos los navegadores

Fatal

2

Eres el hombre. He estado luchando con este problema en FF y su solución es la única que realmente funciona, especialmente con botones más grandes al aumentar su área activa usando "tamaño de fuente". ¡Gracias! :)

jpincheira

2

Excelente sin usar ningún script

Bujji

1

Twitter lo hace pero fue un poco complicado en comparación con este. ¡Funcionando bien para mí!

volumen uno

¡buena solución! Solo una pregunta: ¿por qué no le da a .fileInput un ancho del 100% y establece el ancho de .inputWrapper en auto?

luin

52

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>

tmanthey
fuente

44

La parte importante es que el desbordamiento del contenedor está configurado como oculto.

Maxim V. Pavlov

1

Esto me funcionó absolutamente en IE y Chrome al menos. Gracias :)

Kevin Dark

1

ancho de borde: 0 0 100px 200px; También funcionó para mí en IE y Chrome. Gracias.

Paul

2

Si hubiera hecho la pregunta original, habría tenido la decencia de marcar esto como la respuesta. Gracias.

Mark Rendle el

Una mejor respuesta está abajo. Use una etiqueta, oculte la entrada. ¡Funciona genial!

gman

25

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

jojo
fuente

He creado un complemento jQuery que hace todo el trabajo por usted: github.com/mbitto/jquery.buttonFile

Manuel Bitto

Esto no funciona en las versiones más recientes de IE. El clic indirecto hace que IE se voltee y denegue el acceso. Es molesto.

Andrew

20

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

Suresh Pattu
fuente

1

Funciona bien en Safari hoy 4 de febrero de 2015

gman

Esta puede ser la mejor y más simple respuesta. También agregaría un onchangecontrolador al inputpara permitir que un código JS recoja la información del archivo cargado.

David R Tribble

16

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.

Erik van Brakel
fuente

44

Ese artículo sobre quirksmode es genial. Sin embargo, las entradas de archivos de estilo siguen siendo difíciles. :PAGS

MitMaro el

No creo que el margen netagivo contenido funcione bien una vez que tenga en cuenta los diferentes estilos de navegador y los tamaños mínimos de fuente que difieren de un usuario a otro.

joebert el

1

joebert: Estoy de acuerdo, creo que la mejor opción sigue siendo la técnica que se muestra en el artículo del modo peculiar, qué dolorosamente hack ...

Erik van Brakel

14

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

Javier Reyes
fuente

66

Estoy bastante seguro de que no funciona en un número entero de navegadores (incluidos FF e IE, la última vez que probé): el único navegador en el que recuerdo que funcionaba era Chrome.

Herman Schaaf

Eso solo funciona con jQuery, pero no es una solución independiente.

Solenoide

3

Esto parece funcionar (abre el menú de selección de archivos), pero cuando se envía el formulario, el archivo no se envía en Firefox e IE, por razones de seguridad.

ampersandre

13

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 ...

nikotromus
fuente

1

Este es un gran método!

Kaow

9

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/

divyenduz
fuente

2

Esta es una solución ordenada, pero no puedo hacer que funcione en Chrome. Al parecer, otros tampoco pueden. Opera y Chrome no permiten hacer clic en el archivo de tipo de entrada por razones de seguridad. Aquí puede encontrar más información sobre esto y una solución que funcionó para mí: stackoverflow.com/a/3030174/2650732

wojjas

Cuando escribí esta respuesta, funcionó en Chrome. Gracias por avisarme, actualizaré mi respuesta en consecuencia

Divyenduz

7

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/>

GoreOle
fuente

El problema es que el onchangeevento no se activa para el inputelemento oculto .

David R Tribble

6

Aquí está mi buen remedio:

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

Al menos funcionó en Safari.

Llano y simple.

Zooza S
fuente

4

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.

D-Inventor
fuente

4

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>

Expandir fragmento

jiang min
fuente

var ev = document.createEvent('HTMLEvents'); cambiar HTMLEvents a MouseEventsvar ev = document.createEvent('MouseEvents');

jiang min

¡Genial gracias! Convertí tu publicación en un fragmento de código ejecutable y cambié HtmlEvents a MouseEvents

Fabian Schmengler el

4

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

Anoop saju
fuente

4

Puede darle al elemento de entrada una opacidad de fuente de 0. Esto ocultará el campo de texto sin ocultar el botón 'Elegir archivos'.

No se requiere JavaScript, borre el navegador cruzado desde IE 9

P.ej,

input {color: rgba(0, 0, 0, 0);}

nicholmen
fuente

3

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? ...

fuente

Incluso este no funcionará en IE6, el navegador no entiende los selectores de atributos.

Adrian Godong el

3

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.

Keleko
fuente

1

En caso de que un usuario haga clic en esa parte, se abrirá la ventana emergente de carga.

Praveen

3

Esto funciona para mi:

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

novato
fuente

2

mi solución es simplemente configurarlo dentro de un div como dijo "druveen", sin embargo, agrego mi propio estilo de botón al div (hacer que parezca un botón con: hover) y simplemente configuro el estilo "opacidad: 0;" a la entrada. Me encanta, espero que haga lo mismo por ti.

ThomasG
fuente

2

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

fuente

Entonces, ¿el campo de texto desapareció o no? "en absoluto" podría implicar una negación allí, pero su gramática es defectuosa (y por lo tanto ambigua).

Kirk Woll

2

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>

Anil Shetty
fuente

1

Considere agregar información contextual a su respuesta que describa lo que hace su fragmento de código.

Clijsters

1

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

Somwang Souksavatd
fuente

1

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>

fuente

1

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>

usuario1965301
fuente

ESTO NO FUNCIONARÁ EN SAFARI ... ya que no permitirá .trigger ('clic') por razones de seguridad:? para que funcione en Safari dinámicamente crear el botón de archivo y volver a agregarlo cuando se carga de nuevo

user1965301

1

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

usuario1965301
fuente

1

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.

Balint Karakai
fuente

1

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

Matthew Pautzke
fuente

1

Resuelto con el siguiente código:

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

druveen
fuente

1

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();" />

Expandir fragmento

Funciona bien en todos los navegadores, sin jQuery, sin CSS.

MadMaxIII
fuente

1

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.

Dan Randolph
fuente

tipo de entrada = botón mostrar solo archivo

Respuestas: