Campo de upload personalizado

Escrito por Programador ASP clásico en Hojas de estilo CSS


Crear un campo upload personalizado.

Código CSS:

<style type="text/css">
/*<![CDATA[*/

.clase_inputfile_js {
background-color:#fff;
width:30px;
height:20px;
position:relative;
overflow:hidden;
/*cursor:pointer;*/
background-image: url('clip20.jpg');
background-repeat: no-repeat;
background-position: center center;
float: left;
margin: 0px 10px 0px 8px;
outline: 0px;
}
.cambia_input_file_js{
font-size:10px;
height:20px;
position:absolute;
top:0px;
right:0px;
z-index:2;
border:0px;
padding:0px;
outline: 0px;
cursor:pointer;
margin: 0px 10px 0px 8px;
}
.cambia_input_file{
outline: 0;
}

div.subir_ar{
float: left;
height:20px;
line-height: 20px;
vertical-align: middle;
font-family: verdana,arial, serif;
font-size: 12px;
color: #4B4B4B;
}
div#valor{
float: left;
height:20px;
line-height: 20px;
vertical-align: middle;
font-family: verdana,arial, serif;
font-size: 12px;
color: #4B4B4B;
} 
div.limpiar {
clear: both;
}

.nombre {
font-family: verdana,arial, serif;
font-size: 12px;
color: #4B4B4B;
}

h1 {
font-family: verdana,arial, serif;
font-size: 1em;
color: #4B4B4B;
margin-bottom: 50px;
}

pre {
margin-top: 50px;
font-family: verdana,arial, serif;
font-size: 11px;
color: #000;
}

/*]]>*/
</style>


Código javascript:

<script type='text/javascript'> 
//<![CDATA[

function nombre_ar(id_archivo){
var archivo = document.getElementById(id_archivo).value;

if(navigator.userAgent.indexOf('Linux') != -1){
var SO = "Linux"; }
else if((navigator.userAgent.indexOf('Win') != -1) &&(navigator.userAgent.indexOf('95') != -1)){
var SO = "Win"; }
else if((navigator.userAgent.indexOf('Win') != -1) &&(navigator.userAgent.indexOf('NT') != -1)){
var SO = "Win"; }
else if(navigator.userAgent.indexOf('Win') != -1){
var SO = "Win"; }
else if(navigator.userAgent.indexOf('Mac') != -1){
var SO = "Mac"; }
else { var SO = "no definido";
}

if(SO = "Win"){
var arr_ruta = archivo.split("\\");
}else{
var arr_ruta = archivo.split("/");
}


var nombre_archivo = (arr_ruta[arr_ruta.length-1]);
var ext_validas = /\.(pdf|gif|jpg|png)$/i.test(nombre_archivo);
if (!ext_validas){
borrar();
alert("Archivo con extensión no válida\nSu archivo: " + nombre_archivo);
return false;
}

document.getElementById('valor').innerHTML = "su archivo: <b>" + nombre_archivo + "<\/b>";
}

function btn_submit(){
var archivo = document.getElementById('adjunto').value;
if(archivo == ''){
alert('Debe seleccionar un archivo previamente');
return false;
}
}

function borrar(){
document.getElementById('valor').innerHTML = "";
var vacio = document.getElementById('adjunto').value = "";
}
window.onload =function personaliza(){
// buscar la clase en los divs
var personalizar = document.getElementsByTagName('div');
for (var i = 0; i < personalizar.length; i++) {
if (personalizar[i].className == 'clase_inputfile') {
personalizar[i].className = 'clase_inputfile_js';
}
}
 
var cambia_input_files = document.getElementsByTagName('input');
for (var i = 0; i < cambia_input_files.length; i++) {
if (cambia_input_files[i].className == 'cambia_input_file') {

var cambiarclase = cambia_input_files[i].cloneNode(true);
cambiarclase.className = 'cambia_input_file_js';
cambiarclase.style.outline="none";
cambiarclase.style.opacity = 0; 
cambiarclase.style.MozOpacity = 0; 
cambiarclase.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity:0)'; 

var padre = cambia_input_files[i].parentNode;
padre.removeChild(cambia_input_files[i]);
padre.appendChild(cambiarclase);
}
}

}

//]]>
</script> 


Código html:

<form action='email.asp' method='post' enctype='multipart/form-data' onsubmit="return btn_submit();">

<div class="nombre">

<label for='nombre'>Nombre:</label>
<input type="text" name="nombre" class="nombre" id="nombre" />
<br /><br />
</div>

<div class="subir_ar">Adjuntar datos:</div>
<div class='clase_inputfile' title="Seleccionar archivo desde su PC">
<input type='file' name="adjunto" id='adjunto' class='cambia_input_file' onchange="nombre_ar(this.id);" title="Seleccionar archivo desde su PC" /></div> 
<div id="valor"><!-- fix --></div>
<div class="limpiar"><!-- fix --></div>
<div class="nombre">
<br /><br />
Extensiones permitidas: pdf, jpg, gif, png
<br /><br />
<input type="submit" value="subir" /> <input type="reset" value="borrar" onclick="borrar();" />

</div>
</form>

 

 

 

Publicado el 11/09/2014 a las 14:09:58 hrs. | 751 visitas.

Subir
Web hosting by Somee.com