Guida javascript – input file personalizzati

Continuano i tutorial del mitico Giacomo, che oggi propone un semplice codice javascript che vi permetterà di personalizzare l’aspetto grafico dei vostri input file, anche se in questo caso specifico faremo fare il ruolo di input file a un comunissimo input di testo.

>> VISITA LA DEMO

Prima di tutto includiamo 2 file, uno per il javascript e uno per il lo stile css:

<script type="text/javascript" src="input_file.js"></script>
<link href="main.css" rel="stylesheet"  type="text/css" />

Successivamente creiamo un form di prova nella nostra pagina html:

<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="file" id="original_file" />
<input type="text" value="" name="new_submit" id="new_file" readonly="readonly"/>
</form>

Ora andiamo a creare i due file inclusi precedentemente nel nostro documento html, chiamaremo main.css il foglio di stile, e input_file.js il “motore” javascript.

File: main.css

#new_file {
	width: 142px;
	height: 25px;
	border: 0;
	padding: 0px 5px 0px 30px;
	background: url(form.png);
}
/* nascondiamo l'input file */
#original_file {
	position: absolute;
	left: -9999px;
}

File: input_file.js

window.onload = function() {
	var new_file = document.getElementById('new_file');
	var original_file = document.getElementById('original_file');
	new_file.onclick = function() { //eseguiamo una funzione quando si clicca sull'input "new_file"
		original_file.click(); //eseguiamo l'evento click sull'input "original_file"
	}
	original_file.onchange = function() { //eseguiamo una funzione quando l'input "original_file" cambia
		new_file.value = original_file.value; //modifichiamo il value dell'input "new_file"
	}
}

In pratica questo tipo di input file è molto comodo per eseguire l’upload di file di vario tipo, potete vedere un esempio visitando la demo.Per comprendere meglio il funzionamento vi invitiamo a leggere i commenti al codice.

Enjoy 🙂