Me pregunto cómo ocultar la parte de campo de texto de una etiqueta de carga de archivos HTML estándarCómo ocultar campo de texto en HTML File Cargar
por ejemplo
<input type="file" name="somename" size="chars">
Esto genera obviamente un campo de texto y el próximo a ese campo es un botón de examinar ... Quiero ocultar la parte del campo de texto, pero mantengo el botón.
Recomiendo ocultar todo y poner un objeto de botón por separado que, al hacer clic, terminará haciendo clic en el botón de exploración de la entrada.
Puede hacerlo con CSS y javascript - check out this article (en realidad, es la segunda vez que uso esta referencia hoy).
Puede poner una imagen como fondo del botón. Eso funcionó para mí, hace un tiempo.
El botón de entrada file es extremadamente difícil de modificar y manipular, principalmente por razones de seguridad.
Si realmente necesita personalizar su botón de carga, recomiendo un cargador basado en Flash como SWFUpload o Uploadify que le permite 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 integrar un control en una forma. El proceso de carga se lleva a cabo por separado. Asegúrese de verificar primero si esto funciona para usted.
Gracias, pero desafortunadamente estoy atrapado en la forma en que mi cliente diseñó el sitio ... que es un simple botón de imagen para que aparezca el cuadro de diálogo de archivo – dswatik
Esto podría hacerse de manera bastante confiable utilizando un cargador de Flash. Pero si el artículo de Shaun Inman funciona y se degrada graciosamente, debería funcionar muy bien. –
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 va a hacer lo mismo sin JavaScript, sino que requiere la posición absoluta de utilizar la propiedad clip.
Referencias
Esto sin duda va a funcionar lo he utilizado en mis projects.I espero que esto ayude :)
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Genial justo lo que necesitaba;) –
No funcionará en IE9 y versiones posteriores. –
no funciona en Chrome en dispositivos Android – Ross
puro CSS y HTML
El truco es utilizar un botón situado encima del botón de archivo de entrada.
Además, se deben establecer
filter: alpha(opacity=0);
al archivo de entrada.
Es posible que pueda 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 click y mostrará la ventana del navegador 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 guion, sea cual sea.
Espero que esto ayude ...
La forma más fácil que no se menciona en ninguna respuesta sería utilizar un label para la input.
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Usando label será útil porque al hacer clic en la etiqueta es hacer clic en la entrada. Esto solo funcionará cuando la entrada id sea igual al atributo for de la etiqueta.
Si está utilizando jQuery, echar un vistazo a este plugin - https://github.com/ajaxray/bootstrap-file-field
se mostrará el campo de entrada de archivo como un botón de arranque y mostrará los nombres de archivo seleccionados maravillosamente. Además, puede establecer varias restricciones usando atributos de datos o configuraciones simples en js.
e, g, data-file-types="image/jpeg,image/png" restringirá la selección de tipos de archivos, excepto las imágenes jpg y png.
Trate de añadir este CSS a la entrada de
font-size: 0;
Gracias esto es exactamente lo que estaba buscando. – dswatik
Esto no parece funcionar en IE. IE produce un error una vez que se inicia la carga. – Raj
Funciona a partir de IE10. IE9 y siguientes no permiten templar el campo de entrada de archivo por JS. –