j'ai cherché la solution pour 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 fichier.
2. la seule alternative pratique est de créer une entrée de fichier" cachée "(en utilisant l'opacité, pas" cachée "ou"display: none"!) et ensuite créer le bouton" ci-dessous". De cette façon le bouton est vu mais sur le claquement d'utilisateur il active réellement le le fichier d'entrée.

Espérons que cette aide! :)

<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 lancer click() sur n'importe quel navigateur mais certains navigateurs ont besoin de l'élément pour être visible et focalisé. Voici un exemple de jQuery:

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

ça marche avec la peau avant le click() mais je ne sais pas si ça marche 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 aidera.

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

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

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

pour ceux qui comprennent que vous devez superposer une forme invisible sur le lien, mais sont trop paresseux pour écrire, je l'ai écrit pour vous. Eh bien, pour moi, mais pourrait tout aussi bien partager. Les commentaires sont les bienvenus.

HTML (quelque part):

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

HTML (quelque part qui ne vous intéressent 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/

si vous voulez que la méthode click fonctionne sur Chrome, Firefox, etc, appliquez le style suivant à votre fichier d'entrée. Il sera parfaitement caché, c'est comme si vous faisiez un display: none;

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

c'est aussi simple que cela, j'ai testé cela fonctionne!

$(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.

Cela fonctionne :

pour des raisons de sécurité sur Firefox et Opera, vous ne pouvez pas lancer 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">

ma solution pour le Safari avec jQuery et jQuery-ui:

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

WORKING SOLUTION

Permettez-moi d'ajouter à cet ancien post, une solution de travail que j'ai utilisé pour utiliser qui fonctionne dans probablement 80% ou plus de tous les navigateurs à la fois nouveaux et anciens.

la solution est complexe mais simple. La première étape est d'utiliser CSS et de deviner le type de fichier d'entrée avec "sous-éléments" qui apparaissent à travers car il a une opacité de 0. La prochaine étape est d'utiliser JavaScript pour mettre à jour son étiquette au besoin.

HTML _{les ID sont simplement insérés si vous voulez un moyen rapide d'accéder à un élément spécifique, les classes cependant, sont un must car ils se rapportent à la CSS qui fixe ce processus entier "1519220920}

<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 de la police de styles et de ces sont totalement votre préférence, Si vous utilisez ce CSS de base, vous pouvez toujours utiliser la marque après-fin jusqu'à style comme vous le souhaitez, ce qui est montré dans le jsfiddle listée à 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 ANCIENS (à la retraite), les navigateurs peuvent encore avoir des ennuis avec elle (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;
    };
};

Travail jsFiddle Exemple

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

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

Mais j'ai trouvé une solution qui fonctionne dans tous les navigateurs. Je ne prétendrai pas avoir testé toutes les versions de chaque navigateur, ou que je sais qu'il va continuer à travailler pour toujours, mais il semble répondre à mes besoins MAINTENANT.

C'est simple: Positionnez le champ d'entrée du fichier à l'extérieur de l'écran (position: absolute; top: -5000px), placez un élément d'étiquette autour de celui-ci, et déclenchez la cliquez sur l'étiquette, au lieu de le champ fichier lui-même.

notez que le lien doit être scripté pour appeler la méthode click du label, il ne le fait pas automatiquement, comme lorsque vous cliquez sur du texte dans un élément label. Apparemment, l'élément de lien capture le clic, et il n'arrive pas jusqu'à l'étiquette.

Notez aussi que cela ne fournit pas une façon d'afficher le fichier actuellement sélectionné, puisque le champ est hors écran. Je voulais présenter immédiatement quand un fichier a été sélectionné, donc ce n'est pas un problème pour moi, mais vous aurez besoin d'une approche un peu différente si votre situation est différente.

il suffit d'utiliser une étiquette d'étiquette, de cette façon vous pouvez cacher l'entrée, et le faire fonctionner à travers son étiquette liée https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

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>

il y a des moyens de rediriger des événements vers le contrôle, mais ne vous attendez pas à pouvoir facilement lancer des événements vers le contrôle du feu vous-même, car les navigateurs vont essayer de bloquer cela pour des (bonnes) raisons de sécurité.

si vous avez seulement besoin de la boîte de dialogue de fichier pour apparaître quand un utilisateur clique quelque chose, disons parce que vous voulez des boutons de téléchargement de fichier de meilleure recherche, alors vous pourriez vouloir jeter un oeil à ce que Shaun Inman a inventé avec .

J'ai été capable de réaliser le déclenchement du clavier avec le déplacement créatif de la mise au point dans et hors du contrôle entre keydown, keypress & keyup events. YMMV.

Mon sincère avis est de laisser ce le seul, parce que c'est un monde de navigateur-incompatibilité-douleur. Des mises à jour mineures du navigateur peuvent également bloquer des trucs sans avertissement et vous devrez peut-être continuer à réinventer des piratages pour continuer à le faire fonctionner.

j'ai fait des recherches à ce sujet il y a un moment parce que je voulais créer un bouton personnalisé qui ouvrirait la boîte de dialogue fichier et démarrerait 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. Ainsi le suivant pourrait le faire:

1. créer un téléchargement de fichier et un élément séparé contenant une image que vous voulez utiliser comme le bouton
2. les arranger pour se chevaucher et rendre l'élément file background et border transparent pour que le bouton soit la seule chose visible
3. ajouter le javascript pour faire ouvrir IE la boîte de dialogue lorsque le bouton / la saisie du 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 il pourrait tout simplement fonctionner.

ce code fonctionne pour moi. 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>

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

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

Ce sera désormais possible dans Firefox 4, avec l'inconvénient que cela compte comme une fenêtre pop-up et sera donc bloqué à chaque fois qu'une fenêtre pop-up aurait été.

Voici la 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 des "petits" JQuery aider:

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

assurez-vous que maskfied est couvert de façon compelente par true upload field.

j'ai eu un <input type="button"> tag caché de la vue. Ce que j'ai fait était d'attacher l'événement "onClick" à n'importe quelle composante visible de n'importe quel type tel qu'une étiquette. Cela a été fait en utilisant les outils de développement de Google Chrome ou firefox de Mozilla Firefox en utilisant le clic droit "modifier HTML" commande. Dans ce cas précisez le script suivant ou quelque chose de similaire:

si vous avez JQuery:

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

si non:

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

Grâce.

vous pouvez le faire selon la réponse de Ouvrir La boîte de dialogue de fichier sur < A> tag

<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 input(file) est en dehors de la forme, alors l'événement de claquement de mise à feu appelle la boîte de dialogue de dossier.

J'espère que cela aidera quelqu'un - j'ai passé 2 heures à frapper ma tête contre elle:

dans IE8 ou IE9, si vous déclenchez l'ouverture d'un fichier avec javascript de quelque façon que ce soit (croyez-moi je les ai tous essayés), il ne vous permettra pas de soumettre le formulaire en utilisant javascript, il va tout simplement silencieusement échouer.

soumettre le formulaire par l'intermédiaire d'un bouton Soumettre régulier peut fonctionner, mais en appelant le formulaire.submit(); en silence à l'échec.

j'ai dû recourir à superposer 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>

il 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 façon ou d'une autre cela ne fonctionne que si c'est dans une fonction qui a été appelée via un événement de clic.

donc vous pourriez 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>