html - texto - tipos de extensiones de archivos
¿Tipo de entrada de tipo de archivo? (6)
Esta pregunta ya tiene una respuesta aquí:
- Diseño de un tipo de entrada = botón "archivo" 40 respuestas
¿Es posible crear un elemento de entrada de 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.
Aquí hay una solución simple de solo CSS, que crea un área objetivo consistente y le permite diseñar sus elementos falsos de la forma que desee.
La idea básica es esta:
- Tenga dos elementos "falsos" (una entrada / enlace de texto) como hermanos para su entrada de archivo real. Colóquelos de manera absoluta para que estén exactamente en la parte superior de su área objetivo.
- Envuelva su entrada de archivo con un div. Establezca el desbordamiento en oculto (para que la entrada del archivo no se derrame) y hágalo exactamente del tamaño que desea que sea su área objetivo.
- Establezca la opacidad en 0 en la entrada del archivo para que esté oculta pero aún se pueda hacer clic. Dale un tamaño de letra grande para que puedas hacer clic en todas las partes del área objetivo.
Aquí está el 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>
Después de buscar en Google durante mucho tiempo, probando varias soluciones, tanto CSS, JavaScript y JQuery, encontré que la mayoría de ellos usaba una imagen como botón. Algunos de ellos eran difíciles de usar, pero logré reconstruir algo que terminó funcionando para mí.
Las partes importantes para mí fueron:
- El botón Examinar debe ser un Botón (no una imagen).
- El botón tenía que tener un efecto de desplazamiento (para que se vea bien).
- El ancho tanto del texto como del botón debe ser fácil de ajustar.
- La solución tenía que funcionar en IE8, FF, Chrome y Safari.
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 ambos .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>
La misma solución a través de 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();
});
Siga estos pasos y luego podrá crear estilos personalizados para su formulario de carga de archivos:
1.) Este es el formulario HTML simple (lea los comentarios en HTML que he escrito a continuación)
<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>
Utilice la propiedad del clip junto con la opacidad, el índice z, el posicionamiento absoluto y algunos filtros del navegador para colocar la entrada del archivo sobre el botón deseado:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
use el uniform js plugin para introducir estilos de cualquier tipo, seleccione, textarea.
La URL es http://uniformjs.com/