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 ?

Question

J'aimerais faire en sorte qu'un événement de clic se déclenche sur un élément de la liste de contrôle. <input type="file"> de manière programmatique.

Le simple fait d'appeler click() ne semble rien faire ou, du moins, ne fait pas apparaître une boîte de dialogue de sélection de fichier.

J'ai essayé de capturer des événements en utilisant des écouteurs et en redirigeant l'événement, mais je n'ai pas réussi à faire en sorte que l'événement se produise réellement, comme si quelqu'un avait cliqué dessus.

Answer 1

J'ai cherché une solution à ce problème toute la journée. Et voici les conclusions que j'ai tirées :

1. Pour des raisons de sécurité, Opera et Firefox ne permettent pas de déclencher l'entrée de fichiers.
2. La seule solution pratique consiste à créer une entrée de fichier "cachée" (en utilisant l'opacité, et non pas "caché" ou "affichage : none" ! De cette façon, le bouton est visible, mais lorsque l'utilisateur clique dessus, il active réellement l'entrée de fichier.

J'espère que cela vous aidera ! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  position: relative; top: -40px;; left: -20px" />
</div>

Answer 2

Vous ne pouvez pas faire cela dans tous les navigateurs, soi-disant IE fait le permettent, mais Mozilla et Opera ne le font pas.

Lorsque vous composez un message dans GMail, la fonction "joindre des fichiers" est mise en œuvre d'une manière pour IE et tout navigateur qui la prend en charge, et d'une autre manière pour Firefox et les navigateurs qui ne la prennent pas en charge.

Je ne sais pas pourquoi tu ne peux pas le faire, mais une chose qui est un risque pour la sécurité, et ce que vous n'êtes autorisé à faire dans aucun navigateur, est de définir par programme le nom du fichier sur l'élément HTML File.

Answer 3

Vous pouvez lancer click() sur n'importe quel navigateur mais certains navigateurs ont besoin que l'élément soit visible et focalisé. Voici un exemple en jQuery :

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

Il fonctionne avec le cache avant le click() mais je ne sais pas si cela fonctionne sans appeler la méthode show. Je n'ai jamais essayé cela sur Opera, j'ai testé sur IE/FF/Safari/Chrome et cela fonctionne. J'espère que cela vous aidera.

Answer 4

C'EST POSSIBLE : Sous FF4+, Opera ?, Chrome : mais :

1. inputElement.click() doit être appelé depuis le contexte d'action de l'utilisateur ! (pas le contexte d'exécution du script)

2. <input type="file" /> devrait être visible ( inputElement.style.display !== 'none' ) (vous pouvez le cacher avec la visibilité ou autre, mais pas avec la propriété "display")

Answer 5

Pour ceux qui comprennent qu'il faut superposer un formulaire invisible sur le lien, mais qui sont trop paresseux pour écrire, je l'ai écrit pour vous. Enfin, pour moi, mais autant partager. Les commentaires sont les bienvenus.

HTML (quelque part) :

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (Quelque chose dont vous ne vous souciez pas) :

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript :

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}