Un botón de entrada de archivo para todos los navegadores, ¿es esto posible?

¿Es posible usar uploadify para permitir que cualquier usuario seleccione un archivo del diálogo del archivo e insertarlo en el elemento de entrada del archivo de un formulario? Solo necesito usar uploadify como una forma de estilo del "botón de carga" como una imagen.Un botón de entrada de archivo para todos los navegadores, ¿es esto posible?

He intentado otros enfoques here, here y here. Todos no son compatibles con todos los navegadores.

¿Qué más puedo usar/hacer para tener mi elemento de entrada de archivo como una imagen?

Me gustaría que mi botón de entrada de archivos sea coherente en todos los navegadores.

Fuente

2011-03-04 Christian Fazzini

No recuerdo la fuente de la técnica, pero this parece ser un navegador cruzado. Probado en:

Google Chrome 9
Firefox 3.6
Internet Explorer 6-9
Opera 10
Safari para Windows

Aquí está el código completo:

HTML:

<div> 
    <button><!-- this is skinnable -->Pick a file ...</button> 
    <input type="file" /> 
</div>

CSS:

div 
{ 
    position:relative; 
    width: 100px; 
    height: 30px; 
    overflow:hidden; 
} 

div button 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

div input 
{ 
    font: 500px monospace; /* make the input's button HUGE */ 
    opacity:0; /* this will make it transparent */ 
    filter: alpha(opacity=0); /* transparency for Internet Explorer */ 
    position: absolute; /* making it absolute with z-index:1 will place it on top of the button */ 
    z-index: 1; 
    top:0; 
    right:0; 
    padding:0; 
    margin: 0; 
}

La idea es hacer que el <input type="file" /> transparente y colocarlo en la parte superior de algunos contenidos en el estilo-poder (un <button> en este caso). Cuando el usuario final haga clic en el botón, realmente hará clic en <input type="file" />.

Fuente

2011-03-04 09:33:52

Hmmm solución muy limpia. Parece funcionar entre los navegadores antes mencionados. Lo probará más, pero hasta ahora se ve bien. Gracias por eso, Atanas. Lo aprecio –

Utilicé esto antes y funciona bastante bien. También puede utilizar un evento onchange en la entrada [Archivo] para leer la ruta del archivo y mostrarlo al usuario en la interfaz de usuario. Lo usé para el compresor mencionado [aquí] (http://stackoverflow.com/questions/23745/does-a-yui-compressor-gui-app-exist/5056975#5056975) – johnhunter

Como referencia, encontré algunos fuentes en línea de relevancia para la solución mencionada anteriormente: http://www.quirksmode.org/dom/inputfile.html y para cualquier persona que http://hiox.org/30547-css-style-input-typefile-tags.php quiere hacer más lectura –

Su mejor opción en ese caso sería utilizar una carga de flash. Esto introduciría un control completo por separado y no tendría ninguna dependencia en el navegador. Hay muchos en la red. Aquí hay uno: http://swfupload.org/

Fuente

2011-03-04 08:38:35 JohnP

JohnP, he enumerado algunos en mi post inicial que son como swfupload. El problema sigue siendo el mismo, como se explica con el método de carga. –

El enlace que publiqué realmente usa Flash y solo tiene JS como alternativa. Flash se verá coherente en todos los navegadores. Echa un vistazo – JohnP

No estoy buscando enviar el formulario a través de Ajax sin embargo.Tiene razón en el sentido de que Flash hará que la entrada del archivo se vea coherente. Pero Flash sostiene, en su propio camino a través de Ajax –

Si solo desea cargar el botón de carga, ¿por qué no puede usar CSS? Eso debería funcionar en todos los navegadores.

Si pones tu código en jsFiddle, puedo contarte más sobre lo que puedes hacer.

Fuente

2011-03-04 08:39:54 picardo

Hola Picardo, en teoría, me gustaría utilizar una imagen en lugar del elemento de entrada de archivo nativo que se muestra en todos los navegadores. Creo CSS sólo no puede eliminar el cuadro de texto que viene con el elemento de entrada de archivo –

Qué navegadores que están teniendo problemas con? Puede usar una de las opciones que ha citado y buscar el navegador no compatible. – picardo

No he probado en IE. Pero http://www.appelsiini.net/projects/filestyle funciona en FF, Chrome, Safari. No funciona en absoluto con Opera –

La manera simple de usar una etiqueta "etiqueta" y la propiedad "para". Me gusta esto http://jsfiddle.net/Txrs6/ pero en este caso no vemos el archivo elegido. CÓDIGO

<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>` 

<input style="display: none;" type="file" id="inputFile">

Otra forma con js http://jsfiddle.net/PZ5Ep/

Fuente

2013-11-01 14:23:49 kraken

Un botón de entrada de archivo para todos los navegadores, ¿es esto posible?

Respuesta

Cuestiones relacionadas