27 votes

jQuery : simuler un clic sur un <input type="file" /> ne fonctionne pas dans Firefox ?

Duplicata possible :
En JavaScript, puis-je faire en sorte qu'un événement "clic" se déclenche de manière programmée pour un élément de saisie de fichier ?

J'ai une page web qui ressemble à ceci

<html>
    <head>
        <title>File Upload Click Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
        <input type="file"></input>
    </body>
</html>

Mon objectif est d'avoir le div déclencher un événement de clic sur le entrée du fichier Cela semble fonctionner exactement comme prévu dans IE et Chrome, mais ne fonctionne pas dans Firefox (aucun navigateur de fichiers ne s'ouvre lorsque vous cliquez sur l'icône div ).

Y a-t-il un moyen de faire fonctionner ceci dans FF ?

33voto

bobince Points 270740

Y a-t-il un moyen de faire fonctionner ceci dans FF ?

Non, et ça ne fonctionne pas non plus dans les versions les plus courantes d'IE. IE ouvrira la boîte de dialogue, mais une fois que vous aurez sélectionné un fichier, le formulaire ne sera pas soumis.

Abandonnez l'espoir. La seule façon de simuler une boîte de téléchargement de fichiers est d'utiliser la technique de la transparence, ce qui n'est pas du tout recommandé, car les navigateurs peuvent disposer les boîtes de téléchargement de fichiers différemment en interne (ou même fournir un contrôle de téléchargement de fichiers qui n'inclut pas de dialogue de navigation), ce qui rend très probable la création d'un formulaire inopérant.

Apprenez à aimer le champ gris de téléchargement de fichiers, ou utilisez l'amélioration progressive pour le remplacer par Flash lorsque cela est possible.

20voto

Design Kanya Points 101

Voici la solution de contournement (FF). La partie HTML :

<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS pour le type de fichier d'entrée :

.file-upload { display:none; }

La partie jQuery :

//bind click
$('#btn-logo').click(function(event) {
  $('#logo').click();
});

//capture selected filename
$('#logo').change(function(click) {
  $('#text-logo').val(this.value);
});

Lors de la soumission du formulaire, le fichier d'entrée caché téléchargera le fichier. J'espère que cela vous aidera :)

6voto

BalusC Points 498232

Ceci est interdit pour des raisons de sécurité. Vous avez vraiment besoin d'avoir votre pointeur sur les input type="file" champ.

Si vous êtes vraiment intéressés par le style de la input type="file" vous trouverez peut-être cet article utile.

Au moins, tu es pas le seul .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X