Je voudrais déclencher un événement de clic sur une <input type="file">balise par programme.

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

J'ai essayé de capturer des événements à l'aide d'écouteurs et de rediriger l'événement, mais je n'ai pas pu obtenir cela pour réellement exécuter l'événement comme si quelqu'un cliquait dessus.

Vous ne pouvez pas le faire dans tous les navigateurs, soi - disant IE ne permet, mais Mozilla et Opera ne sont pas.

Lorsque vous composez un message dans GMail, la fonctionnalité «joindre des fichiers» est implémentée d'une manière pour IE et tout navigateur qui prend en charge cela, puis implémentée d'une autre manière pour Firefox et les navigateurs qui ne le font pas.

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

Je cherchais une solution à toute cette journée. Et ce sont les conclusions que j'ai faites:

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

J'espère que cela t'aides! :)

<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>

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

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

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

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

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

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

Pour ceux qui comprennent que vous devez superposer un formulaire invisible sur le lien, mais sont trop paresseux pour écrire, je l'ai écrit pour vous. Eh bien, 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 part où 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();
}

Essayez cette solution: http://code.google.com/p/upload-at-click/

utilisez simplement une balise d'étiquette, de cette façon, vous pouvez masquer l'entrée et la faire fonctionner via son étiquette associée https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Si vous souhaitez que la clickméthode fonctionne sur Chrome, Firefox, etc., appliquez le style suivant à votre fichier d'entrée. Il sera parfaitement caché, c'est comme si vous faisiez undisplay: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

C'est aussi simple que ça, j'ai testé ça marche!

$(document).one('mousemove', function() { $(element).trigger('click') } );

A fonctionné pour moi quand j'ai rencontré un problème similaire, c'est un eRube Goldberg régulier.

SOLUTION DE TRAVAIL

Permettez-moi d'ajouter à cet ancien article, une solution de travail que j'utilisais et qui fonctionne probablement dans 80% ou plus de tous les navigateurs, nouveaux et anciens.

La solution est complexe mais simple. La première étape consiste à utiliser CSS et à deviner le type de fichier d'entrée avec des "sous-éléments" qui transparaissent car il a une opacité de 0. L'étape suivante consiste à utiliser JavaScript pour mettre à jour son étiquette selon les besoins.

HTML _{Les ID sont simplement insérés si vous vouliez un moyen rapide d'accéder à un élément spécifique, les classes sont cependant un must car elles se rapportent au CSS qui met en place tout ce processus}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{Gardez à l'esprit, la coloration et les styles de police et tout cela sont totalement votre préférence, si vous utilisez ce CSS de base, vous pouvez toujours utiliser le balisage après style comme vous le souhaitez, cela est indiqué dans le jsFiddle répertorié à la fin.}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{Pur et vrai, cependant, certains navigateurs plus anciens (retraités) peuvent toujours avoir des problèmes avec cela (comme Netscrape 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

Exemple de jsFiddle de travail

Ça marche :

Pour des raisons de sécurité sur Firefox et Opera, vous ne pouvez pas déclencher le clic sur l'entrée de fichier, mais vous pouvez simuler avec MouseEvents:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

Je sais que c'est vieux, et toutes ces solutions sont des hacks autour des précautions de sécurité du navigateur avec une valeur réelle.

Cela dit, à partir d'aujourd'hui, fileInput.click () fonctionne dans Chrome actuel (36.0.1985.125 m) et Firefox ESR actuel (24.7.0), mais pas dans IE actuel (11.0.9600.17207). La superposition d'un champ de fichier avec l'opacité 0 au-dessus d'un bouton fonctionne, mais je voulais un élément de lien comme déclencheur visible, et le soulignement du survol ne fonctionne pas tout à fait dans n'importe quel navigateur. Il clignote puis disparaît, probablement le navigateur réfléchissant si le style de vol stationnaire s'applique réellement ou non.

Mais j'ai trouvé une solution qui fonctionne dans tous ces navigateurs. Je ne prétendrai pas avoir testé chaque version de chaque navigateur, ou que je sais qu'il continuera de fonctionner pour toujours, mais il semble répondre à mes besoins maintenant.

C'est simple: positionnez le champ de saisie de fichier hors écran (position: absolu; haut: -5000 pixels), placez un élément d'étiquette autour de lui et déclenchez le clic sur l'étiquette, au lieu du champ de fichier lui-même.

Notez que le lien doit être scripté pour appeler la méthode click de l'étiquette, il ne le fait pas automatiquement, comme lorsque vous cliquez sur du texte à l'intérieur d'un élément d'étiquette. Apparemment, l'élément de lien capture le clic, et il ne parvient pas à l'étiquette.

Notez également que cela ne permet pas d'afficher le fichier actuellement sélectionné, car le champ est hors écran. Je voulais soumettre immédiatement lorsqu'un fichier a été sélectionné, donc ce n'est pas un problème pour moi, mais vous aurez besoin d'une approche quelque peu différente si votre situation est différente.

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

Ce code fonctionne pour moi. C'est ce que vous essayez de faire?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

Ma solution pour Safari avec jQuery et jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

Voici une solution JavaScript pure à ce problème. Fonctionne bien sur tous les navigateurs

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

Il existe des moyens de rediriger les événements vers le contrôle, mais ne vous attendez pas à pouvoir facilement déclencher des événements vers le contrôle incendie, car les navigateurs essaieront de bloquer cela pour de (bonnes) raisons de sécurité.

Si vous avez seulement besoin que la boîte de dialogue de fichier apparaisse lorsqu'un utilisateur clique sur quelque chose, disons parce que vous voulez des boutons de téléchargement de fichiers plus beaux, alors vous voudrez peut-être jeter un œil à ce que Shaun Inman a proposé .

J'ai réussi à déclencher le clavier avec un décalage créatif de la mise au point dans et hors du contrôle entre les événements keydown, keypress et keyup. YMMV.

Mon conseil sincère est de laisser cela tranquille, car c'est un monde de navigateur-incompatibilité-douleur. Les mises à jour mineures du navigateur peuvent également bloquer les astuces sans avertissement et vous devrez peut-être continuer à réinventer les hacks pour que cela fonctionne.

Je faisais des recherches sur ce sujet il y a quelque temps car je voulais créer un bouton personnalisé qui ouvrirait la boîte de dialogue de fichier et commencerait le téléchargement immédiatement. Je viens de remarquer quelque chose qui pourrait rendre cela possible - Firefox semble ouvrir la boîte de dialogue lorsque vous cliquez n'importe où sur le téléchargement. Donc, ce qui suit pourrait le faire:

1. Créez un téléchargement de fichier et un élément séparé contenant une image que vous souhaitez utiliser comme bouton
2. Disposez-les de manière à les chevaucher et à rendre l'arrière-plan et la bordure de l'élément de fichier transparents afin que le bouton soit la seule chose visible
3. Ajoutez le javascript pour que IE ouvre la boîte de dialogue lorsque le bouton / l'entrée de fichier est cliqué
4. Utiliser un événement onchange pour soumettre le formulaire lorsqu'un fichier est sélectionné

Ce n'est que théorique puisque j'ai déjà utilisé une autre méthode pour résoudre le problème, mais cela pourrait bien fonctionner.

J'avais une <input type="button">étiquette cachée. J'ai attaché l' "onClick"événement à n'importe quel composant visible de n'importe quel type, comme une étiquette. Cela a été fait en utilisant soit les outils de développement de Google Chrome, soit le Firebug de Mozilla Firefox en utilisant la commande "edit HTML" du clic droit. Dans ce cas, spécifiez le script suivant ou quelque chose de similaire:

Si vous avez JQuery:

$('#id_of_component').click();

si non:

document.getElementById('id_of_component').click();

Merci.

Hé, cette solution fonctionne. pour le téléchargement, nous devrions utiliser MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

Pour AngularJS ou même pour javascript normal.

Cela sera désormais possible dans Firefox 4, avec la mise en garde qu'elle compte comme une fenêtre pop-up et sera donc bloquée chaque fois qu'une fenêtre pop-up aurait été.

Voici une solution qui fonctionne pour moi: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML avec "petite" aide JQuery:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

Assurez-vous simplement que maskfied est complètement couvert par un vrai champ de téléchargement.

Vous pouvez le faire selon la réponse de la boîte de dialogue Ouvrir un fichier sur la balise <a>

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

J'ai trouvé que si l'entrée (fichier) est en dehors du formulaire, le déclenchement de l'événement click invoque la boîte de dialogue du fichier.

J'espère que cela aide quelqu'un - j'ai passé 2 heures à me cogner la tête:

Dans IE8 ou IE9, si vous déclenchez l'ouverture d'une entrée de fichier avec javascript de quelque façon que ce soit (croyez-moi, je les ai tous essayés), cela ne vous permettra pas de soumettre le formulaire en utilisant javascript, il échouera silencieusement.

L'envoi du formulaire via un bouton d'envoi normal peut fonctionner mais en appelant form.submit (); échouera silencieusement.

J'ai dû recourir à la superposition de mon bouton de sélection de fichier avec une entrée de fichier transparente qui fonctionne.

Cela a fonctionné pour moi:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

ce n'est pas impossible:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

Mais d'une manière ou d'une autre, cela ne fonctionne que si c'est dans une fonction qui a été appelée via un événement click.

Vous pouvez donc avoir la configuration suivante:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Vous pouvez utiliser

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>