web-dev-qa-db-fra.com

jQuery: la simulation d'un clic sur un <input type = "file" /> ne fonctionne pas dans Firefox?

Duplicata possible:
En JavaScript, puis-je déclencher un événement "clic" par programmation pour un élément d'entrée 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 que le div déclenche un événement de clic sur l'entrée de fichier, et cela semble fonctionner exactement comme je m'y attendais dans IE et Chrome, mais ne fonctionne pas dans Firefox (aucun navigateur de fichiers n'est ouvert lorsque vous cliquez sur div).

Existe-t-il un moyen de faire fonctionner cela dans FF?

javascriptjqueryhtmlfile-upload
30
kristian

Existe-t-il un moyen de faire fonctionner cela dans FF?

Non, et cela ne fonctionne pas non plus dans la plupart des versions courantes d'IE. IE ouvrira la boîte de dialogue, mais une fois que vous aurez sélectionné un fichier avec lui, le formulaire ne sera pas réellement envoyé.

Abandonner l'espoir. La seule façon de truquer une boîte de téléchargement de fichiers est d'utiliser la technique de transparence, et ce n'est vraiment pas recommandé du tout 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 Parcourir), ce qui rend très probable que vous vous retrouverez avec une forme inutilisable.

Apprenez à aimer le champ de téléchargement de fichiers gris ou utilisez l'amélioration progressive pour le remplacer par Flash, le cas échéant.

34
bobince

Voici la solution de contournement (FF). Le bit 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; }

Le bit 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 t'aides :)

22
Design Kanya