¿Hay alguna manera de ocultar el botón Examinar y solo dejar el cuadro de texto que funciona en todos los navegadores?Ocultar el botón Examinar en un tipo de entrada = archivo
He intentado fijar los márgenes sino que mostrará diferente en cada navegador
No, lo que puede hacer es una solución (feo), sino que se utiliza en gran medida
Aquí se puede ver una explicación completa, junto con el código:
Me gustaría pensar que el navegador podría prohibir esto para la seguridad en el futuro. –
No veo ver por qué esto representa un placer, para ser eliminado. Además, si los navegadores prohíben esto ahora, rompería muchas páginas. – Andre
es posible que sólo sin hacer que el elemento oculto, sólo tiene que hacerlo transparente haciendo que su opacidad sea 0.
Al hacer que el archivo de entrada quede oculto, dejará de funcionar. Entonces NO HAGA ESO ...
Here puede encontrar un ejemplo para una operación de navegación transparente;
Uh, ese es el mismo enlace que la respuesta anterior. –
continuación código muy útil para ocultar botón de navegación por defecto y el uso personalizado en lugar
<style type="text/css">
.file-input-wrapper {
height: 30px;
margin: 2px;
overflow: hidden;
position: relative;
width: 118px;
background-color: #fff;
cursor: pointer;
}
.file-input-wrapper > input[type="file"] {
font-size: 40px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper > .btn-file-input {
background-color: #494949;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 34px;
margin: 0 0 0 -1px;
padding-left: 0;
width: 121px;
cursor: pointer;
}
.file-input-wrapper:hover > .btn-file-input {
//background-color: #494949;
}
</style>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">SELECT FILES</button>
<input type="file" name="image" id="image" value="" />
</div>
<span id="img_text" style="float: right;
margin-right: -80px;
margin-top: -14px;"></span>
</body>
<script>
(function($){
$('input[type="file"]').bind('change',function(){
$("#img_text").html($('input[type="file"]').val());
});
})(jQuery)
</script>
encontró que este fragmento de código es extremadamente útil. Completamente listo para usar. – naiveDeveloper
.dropZoneOverlay, .FileUpload {
width: 283px;
height: 71px;
}
.dropZoneOverlay {
border: dotted 1px;
font-family: cursive;
color: #7066fb;
position: absolute;
top: 0px;
text-align: center;
}
.FileUpload {
opacity: 0;
position: relative;
z-index: 1;
} <div class="dropZoneContainer">
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
</div>me parece una buena manera de lograr esto en Remove browse button from input=file.
La razón detrás de esta solución es que crea una entrada transparente = control de archivos y crea una capa visible para el usuario debajo del control de archivos. El índice z de la entrada = archivo será más alto que la capa.
Con esto, parece que la capa es el control de archivo en sí. Pero en realidad, cuando hace clic en él, el archivo de entrada = es el que hizo clic y aparecerá el cuadro de diálogo para elegir el archivo.
Tech Este es el mejor método. la menor cantidad de complejidad y el menor esfuerzo, supongo. –
Solo una sugerencia adicional para evitar el exceso de JavaScript aquí: si agrega una etiqueta y la etiqueta como el "botón de examinar" que desea tener, puede colocarla sobre el botón de búsqueda real proporcionado por el navegador u ocultar el botón de alguna manera diferente. Al hacer clic en la etiqueta, el comportamiento del navegador es abrir el cuadro de diálogo para buscar el archivo (no olvide agregar el atributo "para" en la etiqueta con el valor de la identificación del campo de entrada del archivo para que esto suceda). De esta forma, puede personalizar el botón de la forma que desee.
En algunos casos, puede ser necesario agregar un segundo campo de entrada o elemento de texto para mostrar el valor de la entrada del archivo y ocultar la entrada completamente como se describe en otras respuestas. Aún la etiqueta evitaría simular el clic en el botón de entrada de texto por JavaScript.
Por cierto, se puede usar un truco similar para personalizar casillas de verificación o botones de radio.agregando una etiqueta para ellos, al hacer clic en la etiqueta, se selecciona la casilla de verificación/botón de radio. El checkbox/radiobutton nativo puede ocultarse y reemplazarse por un elemento personalizado.
Por extraño que parezca, esto funciona para mí (cuando coloco dentro de una etiqueta de botón).
.button {
position: relative;
input[type=file] {
color: transparent;
background-color: transparent;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
z-index: 100;
}
}
probado solo en Chrome (macOS Sierra).
así que encontré esta solución que es muy fácil de implementar y proporciona una interfaz gráfica de usuario muy limpia
poner esto en su HTML
<label class="att-each"><input type="file"></label>
y esto en tu CSS
label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}
complemento -file.png puede ser cualquier gráfico que desee mostrar en la página web. Al hacer clic en el gráfico se iniciará el explorador de archivos predeterminado.
Ejemplo de trabajo: http://www.projectnaija.com/file-picker17.html
que respondió a una pregunta similar aquí: http://stackoverflow.com/a/37183065/882337 –