html - subir - plantillas contact form 7

Cómo ocultar el campo de texto en la carga de archivos HTML

Question

Me pregunto cómo ocultar la parte del campo de texto de una etiqueta de carga de archivos html estándar

por ejemplo

<input type="file" name="somename" size="chars">

Esto genera, obviamente, un campo de texto y junto a ese campo hay un botón de búsqueda ... Quiero ocultar la parte del campo de texto pero mantener el botón.

Answer 1

El botón de entrada de file es extremadamente difícil de diseñar y manipular, principalmente por razones de seguridad.

Si realmente necesita personalizar su botón de carga, le recomiendo un cargador basado en Flash como SWFUpload o Uploadify que le permita usar una imagen personalizada como botón, mostrar una barra de progreso y otras cosas.

Sin embargo, su filosofía básica difiere de simplemente incrustar un control en una forma. El proceso de carga se lleva a cabo por separado. Asegúrese de comprobar primero si esto funciona para usted.

Answer 2

Esto seguramente funcionará. Lo he usado en mis proyectos. Espero que esto ayude :)

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

Answer 3

Intenta agregar este css a tu entrada

 font-size: 0;

Answer 4

La forma más fácil como no se menciona en ninguna respuesta sería utilizar una label para la input .

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }

Usar la label será útil porque hacer clic en la etiqueta es hacer clic en la entrada. Esto solo funcionará cuando la id la entrada sea igual a la etiqueta for atributo.

Answer 5

Posiblemente podría ocultar todo el elemento y mostrar un botón o enlace en su lugar. Esto es bastante fácil.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$(''#fileupload'').click();" />

El elemento de carga de archivos está oculto. El botón activará el evento de clic y muestra la ventana del explorador de archivos. Al seleccionar un archivo, el evento de cambio se activa y esto puede enviar un formulario o llamar a una función de secuencia de comandos, en cualquier caso.

Espero que esto ayude...

Answer 6

Puede poner una imagen como fondo para el botón. Eso funcionó para mí, hace un tiempo.

Answer 7

Recomiendo ocultar todo y colocar un objeto de botón separado que, al hacer clic, terminará haciendo clic en el botón de exploración de la entrada.

Puede hacer esto con CSS y javascript: consulte este artículo (en realidad, la segunda vez que he usado esta referencia hoy).

Answer 8

Si está utilizando jQuery, eche un vistazo a este complemento - https://github.com/ajaxray/bootstrap-file-field

Mostrará el campo de entrada del archivo como un botón de arranque y mostrará maravillosamente los nombres de los archivos seleccionados. Además, puede establecer varias restricciones utilizando atributos de datos simples o configuraciones en js.
e, g, data-file-types="image/jpeg,image/png" restringirá la selección de tipos de archivos, excepto jpg y png.

Answer 9

DEMO

Css puro y html

El truco es usar un botón encima del botón de archivo de entrada.

Además, deberías configurar

filter: alpha(opacity=0);

al archivo de entrada.

Answer 10

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
@-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

Esto hará lo mismo sin JavaScript, pero requiere un posicionamiento absoluto para usar la propiedad de clip .

Referencias

• Botón de carga personalizado
• CSS Wikibook: Recorte