¿Es posible diseñar un elemento de entrada del tipo de archivo sin preocuparse por la compatibilidad del navegador? En mi caso, necesito implementar una imagen de fondo y un borde redondo (1px), el botón también debe personalizarse si es posible.¿Archivo de tipo de entrada de estilo?
utilizar la propiedad de clip junto con la opacidad, el índice z, el posicionamiento absoluto, y algunos filtros de explorador para colocar el archivo de entrada sobre el botón deseado:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
Siga estos pasos a continuación, puede crear la costumbre estilos para su formulario de carga de archivos:
1.) Esta es la forma simple de HTML (por favor leer los comentarios HTML que he escrito aquí de abajo)
<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;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.) A continuación, utilice este script simple para pasar el evento click a la etiqueta de entrada de archivo.
function getFile(){
document.getElementById("upfile").click();
}
Ahora puede usar cualquier tipo de estilo sin preocuparse de cómo cambiar los estilos predeterminados. Lo sé muy bien, porque he estado tratando de cambiar los estilos predeterminados por mes y medio. créeme, es muy difícil porque diferentes navegadores tienen etiquetas de entrada de carga diferentes. Por lo tanto, use este para crear sus formularios de carga de archivos personalizados. Aquí está el código de CARGA AUTOMÁTICA.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
La misma solución vía Jquery. Funciona si tiene más de una entrada de archivo en la página.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
¿podría publicar un violín para eso? – johannesMatevosyan
Después de mirar en Google durante mucho tiempo, probando varias soluciones, tanto CSS, JavaScript y jQuery, he encontrado que la mayoría de ellos estaban usando una imagen como el botón. Algunos de ellos eran difíciles de usar, pero logré reconstruir algo que terminó funcionando para mí.
Las partes importantes para mí fue:
Esta es la solución que se me ocurrió. Y espero que pueda ser útil para otros también.
Cambie el ancho de .file_input_textbox para cambiar el ancho del cuadro de texto.
Cambie el ancho de .file_input_div, .file_input_button y .file_input_button_hover para cambiar el ancho del botón. Es posible que necesite modificar un poco las posiciones también. Nunca entendí por qué ...
Para probar esta solución, cree un nuevo archivo html y pegue el contenido en él.
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
un violín para eso: https://jsfiddle.net/gd4wuvga/ – Picard
Aquí hay una única solución sencilla css, que crea un área objetivo constante, y permite que el estilo de los elementos de pata como usted quiera.
La idea básica es la siguiente:
Aquí está la jsFiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
uso uniform js plugin a la entrada de estilo de cualquier tipo, seleccionar, área de texto.
El URL es http://uniformjs.com/
solución de Niza. Use 'display: none' en la entrada en lugar de 'height: 0px; ancho: 0px; desbordamiento: oculto; ' para eliminarlo del DOM/su diseño también. –