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

Possible en double:
In JavaScript can I make a “click” event fire programmatically for a file input element?jQuery: simuler un clic sur un <input type = "file" /> ne fonctionne pas dans Firefox?

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 but est d'avoir le div soulever un clic événement sur l'entrée fichier, et cela semble fonctionner exactement comme je l'ex pect dans IE et Chrome, mais ne fonctionne pas dans Firefox (aucun navigateur de fichiers n'est ouvert lorsque vous cliquez sur le div).

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

Source

2009-12-01 kristian

Il est à venir dans FF4: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method –

Voir cette réponse http://stackoverflow.com/questions/210643/in -javascript-peut-je-faire-un-clic-event-incendie-programmatique-pour-un-fichier-input-e/3030174 # 3030174 ça marche aussi en FF – TheVillageIdiot

Ce matin j'ai testé le script et ça marche très bien dans firefox 4. Firefox 4 permet un événement de clic sur l'entrée de fichier. – kriom

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'Internet Explorer. IE ouvrira la boîte de dialogue, mais une fois que vous avez sélectionné un fichier, le formulaire ne sera pas envoyé.

Abandonner l'espoir. La seule façon de truquer une boîte de téléchargement de fichier est d'utiliser la technique de transparence, ce qui est vraiment déconseillé car les navigateurs peuvent disposer différemment les boîtes de téléchargement de fichiers (ou même fournir un contrôle de téléchargement de fichier qui n'inclut pas de dialogue Parcourir). ce qui rend très probable que vous finirez avec une forme inopérable. Apprenez à aimer le champ de téléchargement de fichiers grisés, ou utilisez l'amélioration progressive pour le remplacer par du Flash lorsqu'il est disponible.

Source

2009-12-02 00:01:40 bobince

+42

Abandonne l'espoir. Vérifier. – kristian

Cela fonctionne maintenant dans Firefox 4. –

Eh bien merci de ne pas me laisser perdre plus de temps ..déjà passé quelques jours à ce sujet avec l'espoir en main. –

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); 
});

À Envoi de formulaire, le fichier d'entrée caché téléchargera le fichier. Hope this helps :)

Source

2012-02-20 01:15:34

Avez-vous essayé le code? Si c'était si facile, pourquoi le demandeur serait-il ici? Pourquoi serais-je ici? Dernière que j'ai vérifié, vous ne pouvez pas définir la valeur d'une entrée de fichier. Et apparemment, vous ne pouvez pas déclencher d'événements sur eux non plus. Probablement des raisons de sécurité. – Stoutie

Je le reprends, on dirait que c'est aussi simple. Mais cela ne fonctionne pas lorsque vous l'essayez dans la console. Quand je place le code dans mon document, cela semble fonctionner correctement. Derp. – Stoutie

+1 cela fonctionne parfaitement, mais pas dans la console! Bizarre, je suppose que c'est pour des raisons de sécurité. – ksloan

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

Répondre

Questions connexes