11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Personnaliser l'inputFile

Bonsoir à tous,

D'abord, je me dois de vous dire que je n'y connais pas grand chose en Javascript.
Ensuite, voici mes 3 questions.

Question1
J'ai inséré ce code dans une page HTML.
Toute l'esthétique fonctionne.
Mais rien ne se passe quand je clique
ou sur la zone texte
ou sur le bouton.
Comment solutionner cela ???

Question2
Comment changer l'inputFile d'origine
par une image "imagezone.gif'" ???

Question3
J'aurais aimé remplacer mon bouton
"images/fichier_choisir_bouton.gif"
par un bouton flash
"flashs/versparcourir.swf".
Mais comment faire ?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<style type="text/css">
.input_file_style_file {
opacity:0.0;
-moz-opacity:0.0;
-khtml-opacity:0.0;
filter:alpha(opacity=0);
height:25px;
}
.input_file_style_new {
margin-top:-23px;
}
.input_file_style_new img,.input_file_style_new input {
vertical-align:middle;
}
.input_file_style_new input {
border:1px solid #cccccc;
height:16px;
margin-right:2px;
padding:1px;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 1px;
}
</style>
</head>
<body>
Voici un champ de s&eacute;lection de fichier personalis&eacute;:<br />
<div class="input_file_style">
<input type="file" size="80" name="file" id="file" class="input_file_style_file"/>
<br />
<div class="input_file_style_new" >
<input type="text" size="80" id="file_new" readonly="readonly"/>
<img src="images/fichier_choisir_bouton.gif" alt="Parcourir" />
</div>
</div>
<script type="text/javascript">
//<!--
document.getElementById('file').onchange=function()
{
document.getElementById('file_new').value = document.getElementById('file').value;
};
//-->
</script>
</body>
</html>[code]
Modifié par jytest (16 Oct 2010 - 16:14)
En fait mon code fonctionne avec google chrome.
Par contre avec IE, cela ne fonctionne qu'à droite du bouton.
Pourquoi ?
Merci d'avance pour vos réponses.

Même sans
<script type="text/javascript">
//<!--
document.getElementById('file').onchange=function()
{
document.getElementById('file_new').value = document.getElementById('file').value;
};
//-->
</script>
Par un autre post envoyé sur le site,
les réponses aux questions m'ont été données.
Merci à davidato.
Sujet clos
Aller à