11548 sujets

JavaScript, DOM et API Web HTML5

Simulation clic sur input type file avec IE [résolu] ou pas...

[post modifié en totalité le 22 novembre 2011 à 08h48]

Bonjour chers Alsanautes.

Je suis développeur débutant et je suis autodidacte. J'ai expliqué mon problème il y a deux jours et comme je n'ai pas de réponse, je reformule en totalité la difficulté que je rencontre.

J'ai un formulaire avec un input de type file. Le comportement normal est l'ouverture d'une fenêtre permettant d'aller chercher le fichier sur le disque dur lorsque l'on clique sur le bouton parcourir ou sur le champ lui même MAIS PAS SUR LE LABEL CORRESPONDANT.

Je souhaite justement pallier à cette lacune en rendant mon label cliquable pour lancer la fenêtre de recherche de fichier. A terme, je dois masquer l'élément de type input file (display : none) pour des raisons esthétiques.

Pour ce faire, je simule le clic sur l'élément parcourir grâce à un trigger lancé lors du clic sur le label. Cela fonctionne (le champ de type file contient bien le chemin). Par contre, sous IE, lorsque je valide le formulaire, il ne se passe rien et le champ se vide. Sur FF et Chrome, le fichier est bien envoyé.

Quelqu'un aurait-il une idée sur une solution, s'il y en a une ou peut être n'est-il tout simplement pas possible de se passer du clic direct sur le bouton parcourir sous IE.

Voici le code exemple :
Formulaire :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" media="screen" href="css.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.7.js"></script>
        <script type="text/javascript" src="print.js"></script>
    </head>
    <body>
        <form method="post" action="recup.php" enctype="multipart/form-data" >
            <p><label for="fichier" id="choisirFichier">Choisir un fichier</label> <input type="file" name="fichier" id="fichier"/></p>
            <p><label for="qte">Quantité</label> <input type="text" name="qte" id="qte" value="10"/></p>
            <p><input type="submit" value="ok"/></p>
        </form>
        <p id="nomFichier">Aucun fichier choisi</p>

    </body>
</html>


Code Javascript

$(function(){
    $('#fichier').live("change", function (e) {
        var val=$(this).val();
        $("#nomFichier").html(val);
    });
        $('#choisirFichier').click(function(){
            $('#fichier').trigger('click');  return false;
        });
});


Code PHP (affichage des données POST et FILES)


<pre>
<?php
echo '<h2>POST</h2>';
print_r($_POST);
echo '<h2>FICHIER</h2>';
print_r($_FILES);
?>
</pre>

Modifié par gemcod (22 Nov 2011 - 16:23)
Bonjour Mamax,

Effectivement les solutions que tu proposes ne sont pas accessibles. C'est bien pour cela que je souhaitait procéder par le label ou un lien. La deuxième solution proposée est simple mais pourtant ingénieuse. Je suis frustré de ne pas y avoir pensé ! Je vais l'adopter.

Pour l'accessibilité, je prévois un lien qui affiche les options non accessibles sans pratiquement aucune dégradation de l'aspect visuel. C'est alors que l'utilisateur peut naviguer en tabulant.

Enfin je ne sais toujours pas pourquoi IE refuse de me poster le contenu de mon formulaire.

Je vais passer mon poste à résolu en faisant la conclusion suivante si cela peut aider quelqu'un qui aurait le même souci que moi (je ne suis pas totalement affirmatif mais plusieurs heures de recherches approfondies ont fini par me forger une opinion personnelle)

IE ne permet pas d'accéder à un input de type file en écriture pour des raisons évidentes de sécurité (sélection d'un fichier et transfert transparent pour l'utilisateur sans son consentement). Si les autres navigateurs le permettent, cela ne constitue pas un comportement normal.
Donc j'en conclu qu'il n'est également pas possible d'ouvrir la fenêtre de choix d'un fichier sans cliquer directement sur le bouton parcourir ou le champ correspondant. En cela, ne fonctionnera pas non plus le clic déclenché par l'activation d'un événement (ex : cliquer sur un élément pour déclencher le clic sur l'input de type file). Au mieux vous verrez effectivement le nom du fichier mais vous ne pourrez pas l'envoyer.


Merci encore à Mamax pour ses propositions
Modifié par gemcod (22 Nov 2011 - 16:21)
Sujet clos
Aller à