11540 sujets

JavaScript, DOM et API Web HTML5

Personalisation d'un input file

Bonjour à tous,

J'ai besoin de votre aide (sinon... je ne posterai pas !!! Smiley cligne )

Je suis sur un code qui devrait me faire plein de choses :
- être compatible safari... Smiley fache
- supprimer le nom du chemin (pour tous les navigateurs) du fichier présent dans le input file
- remplacer le mot "click" par une enveloppe vide (quand il n'y a rien) et par une enveloppe pleine (dès qu'il y a un fichier dans le input file)
- et enfin, je souhaiterai qu'il y ait 5 input file "the_real_file_input[]" au lieu de "the_real_file_input"

Volià, j'ai fini ma liste de doléances.

Plus sérieux maintenant, puis-je vous demander votre aide ?
car je galère à faire ce truc...
Je n'en vois pas le bout du tunnel.

Voici page sur site.

Merci d'avance.

Ci-dessous, le code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<style type="text/css">
#liens a {
	color:#F06;
}
#liens a:hover {
	color:#06C;
}
</style>
<script src='http://code.jquery.com/jquery-1.8.2.min.js'></script>
<script type="text/javascript">
	function chargement(id) {
		var xx= ($('#the_real_file_input').val());
		if (xx!="") {
			document.getElementById("attach").style.backgroundColor = "#ffff00";
			document.getElementById("attach").title = "fichier : "+ xx;
		}else {
			document.getElementById("attach").style.backgroundColor = "#ffffff";
			document.getElementById("attach").title = "vide";
		}
	}
</script>
</head>

<body>
<div id="liens">
    <a href='#' id='attach'> Click </a>
</div>
<div style="opacity:0;display:none;" >
	<input id="the_real_file_input" name="foobar" type="file" onChange="chargement(1);">
</div>

<script>
	$('#attach').click(function(e){
		console.log('click');
		$('#the_real_file_input').click();
	});
	$('#attach').blur(function(e){
		alert("salut");
	});
		
	document.getElementById("attach").style.backgroundColor = "#ffffff";
	document.getElementById("attach").title = "vide";
</script>

</body>
</html>
Sujet clos
Aller à