Cari lettori di good2know, oggi vi presento un nuovo articolo sulla personalizzazione degli input file di un form.
Il metodo è semplice, utilizza i fogli di stile CSS e le proprietà del DOM.
Per vedere un esempio cliccate sul link.
Il concetto è di mettere un input falso al di sopra dell’input file reale e fare in modo che quando viene cliccato l’input file falso o il bottone sfoglia si apra comunque la finestra di scelta del file.
Una volta selezionato il file, l’input file reale dovrà avere come “value” il reale percorso del file.
Di seguito il codice css :
.input_file{
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
.input_file:focus{ background-color: transparent;}
input {
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
input:focus { background-color: transparent;}
div.fileinputs {
position: relative;
height: 26px;
width: 202px;
}
input.file {
width: 274px;
margin: 0;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 274px;
height:26px;
padding: 0;
margin: 0;
z-index: 1;
}
div.fakefile input {
position:relative;
bottom:8px;
margin:0 0 0px 0;
padding:5px 0 0px 10px;
}
Di seguito la funzione js che dovrà essere richiamata nel tag body.
var W3CDOM = (document.createElement && document.getElementsByTagName);
function init() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='img/btn_sfoglia2.png';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].getAttribute('noscript')) continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
if (x[i].value)
x[i].onchange();
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
<body onLoad="init();"> <form action="" method="post" enctype="multipart/form-data"> <div>Â Â Â Â <input type="file" name="link_file" />Â </div> </form> </body>
CompatibilitÃ
Lo script qui sopra è compatibile con tutti i browser, bisogna solo personalizzare il css per Explorer.
Download
Di seguito il link per scaricare l’esempio di sopra.
Iscriviti al feed di Good2know