Ich möchte ein <input type="file">Klickereignis programmgesteuert auf ein Tag auslösen.

Nur das Aufrufen von click () scheint nichts zu bewirken oder öffnet zumindest keinen Dateiauswahldialog.

Ich habe mit dem Erfassen von Ereignissen mithilfe von Listenern experimentiert und das Ereignis umgeleitet, aber ich habe es nicht geschafft, das Ereignis tatsächlich so auszuführen, wie jemand darauf geklickt hat.

Sie können nicht tun , dass in allen Browsern, angeblich IE hat es erlauben, aber Mozilla und Opera nicht.

Wenn Sie eine Nachricht in GMail verfassen, wird die Funktion "Dateien anhängen" für den IE und jeden Browser, der dies unterstützt, auf eine Weise implementiert und dann für Firefox und die Browser, die dies nicht tun, auf eine andere Weise implementiert.

Ich weiß nicht, warum Sie das nicht können, aber eine Sache, die ein Sicherheitsrisiko darstellt und die Sie in keinem Browser tun dürfen, ist das programmgesteuerte Festlegen des Dateinamens für das HTML-Dateielement.

Ich habe den ganzen Tag nach einer Lösung gesucht. Und das sind die Schlussfolgerungen, die ich gezogen habe:

1. Aus Sicherheitsgründen erlauben Opera und Firefox keine Dateieingabe.
2. Die einzig bequeme Alternative besteht darin, eine "versteckte" Dateieingabe zu erstellen (mit Deckkraft, nicht "versteckt" oder "Anzeige: keine"!) Und anschließend die Schaltfläche "darunter" zu erstellen. Auf diese Weise wird die Schaltfläche angezeigt, aber beim Klicken des Benutzers wird die Dateieingabe tatsächlich aktiviert.

Hoffe das hilft! :) :)

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

Sie können click () in jedem Browser auslösen, aber in einigen Browsern muss das Element sichtbar und fokussiert sein. Hier ist ein jQuery-Beispiel:

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

Es funktioniert mit dem Verstecken vor dem, click()aber ich weiß nicht, ob es funktioniert, ohne die show-Methode aufzurufen. Ich habe dies noch nie in Opera versucht. Ich habe es in IE / FF / Safari / Chrome getestet und es funktioniert. Ich hoffe das wird helfen.

DAS IST MÖGLICH: Unter FF4 +, Opera ?, Chrome: aber:

1. inputElement.click()sollte aus dem Kontext der Benutzeraktion aufgerufen werden! (kein Skriptausführungskontext)

2. <input type="file" />sollte sichtbar sein ( inputElement.style.display !== 'none') (Sie können es mit Sichtbarkeit oder einer anderen, aber nicht "Anzeige" -Eigenschaft ausblenden)

Für diejenigen, die verstehen, dass Sie ein unsichtbares Formular über den Link legen müssen, aber zu faul zum Schreiben sind, habe ich es für Sie geschrieben. Nun, für mich, könnte aber genauso gut teilen. Kommentare sind willkommen.

HTML (irgendwo):

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

HTML (an einem Ort, den Sie nicht interessieren):

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

Probieren Sie diese Lösung aus: http://code.google.com/p/upload-at-click/

Verwenden Sie einfach ein Label-Tag. Auf diese Weise können Sie die Eingabe ausblenden und sie über das zugehörige Label https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label bearbeiten

Wenn die clickMethode unter Chrome, Firefox usw. funktionieren soll, wenden Sie den folgenden Stil auf Ihre Eingabedatei an. Es wird perfekt versteckt sein, es ist wie du es tustdisplay: none;

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

So einfach ist das, ich habe getestet, dass es funktioniert!

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

Arbeitete für mich, als ich auf ein ähnliches Problem stieß, es ist ein regulärer eRube Goldberg.

ARBEITSLÖSUNG

Lassen Sie mich diesem alten Beitrag eine funktionierende Lösung hinzufügen, die ich verwendet habe und die wahrscheinlich in 80% oder mehr aller neuen und alten Browser funktioniert.

Die Lösung ist komplex und doch einfach. Der erste Schritt besteht darin, CSS zu verwenden und den Eingabedateityp mit "Unterelementen" zu versehen, die durchscheinen, da er eine Deckkraft von 0 hat. Der nächste Schritt besteht darin, JavaScript zu verwenden, um die Bezeichnung nach Bedarf zu aktualisieren.

HTML _{Die IDs werden einfach eingefügt, wenn Sie schnell auf ein bestimmtes Element zugreifen möchten. Die Klassen sind jedoch ein Muss, da sie sich auf das CSS beziehen, das diesen gesamten Prozess einrichtet}

<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 _{Denken Sie daran, dass Farben und Schriftstile und dergleichen Ihre Präferenz sind. Wenn Sie dieses grundlegende CSS verwenden, können Sie immer das After-End-Markup verwenden, um den Stil nach Ihren Wünschen zu gestalten. Dies wird in der am Ende aufgeführten jsFiddle angezeigt.}

.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 _{Rein und wahr, einige ältere (pensionierte) Browser haben möglicherweise immer noch Probleme damit (wie 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;
    };
};

Arbeitsbeispiel jsFiddle

Es klappt :

Aus Sicherheitsgründen können Sie in Firefox und Opera die Klick auf die Dateieingabe nicht auslösen, aber Sie können mit MouseEvents simulieren:

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

Ich weiß, dass dies alt ist, und all diese Lösungen sind Hacks um Sicherheitsvorkehrungen für Browser mit echtem Wert.

Ab heute funktioniert fileInput.click () im aktuellen Chrome (36.0.1985.125 m) und im aktuellen Firefox ESR (24.7.0), jedoch nicht im aktuellen IE (11.0.9600.17207). Das Überlagern eines Dateifelds mit der Deckkraft 0 über einer Schaltfläche funktioniert, aber ich wollte ein Linkelement als sichtbaren Auslöser, und das Unterstreichen des Schwebefluges funktioniert in keinem Browser. Es blinkt und verschwindet dann. Wahrscheinlich überlegt der Browser, ob das Hover-Styling tatsächlich zutrifft oder nicht.

Aber ich habe eine Lösung gefunden, die in all diesen Browsern funktioniert. Ich werde nicht behaupten, jede Version jedes Browsers getestet zu haben oder dass ich weiß, dass es für immer funktionieren wird, aber es scheint jetzt meine Anforderungen zu erfüllen.

Es ist ganz einfach: Positionieren Sie das Dateieingabefeld außerhalb des Bildschirms (Position: absolut; oben: -5000px), setzen Sie ein Beschriftungselement darum und lösen Sie den Klick auf die Beschriftung anstelle des Dateifelds selbst aus.

Beachten Sie, dass der Link per Skript ausgeführt werden muss, um die Klickmethode des Etiketts aufzurufen. Dies geschieht nicht automatisch, wie wenn Sie auf Text in einem Etikettenelement klicken. Anscheinend erfasst das Link-Element den Klick und schafft es nicht bis zur Beschriftung.

Beachten Sie auch, dass dies keine Möglichkeit bietet, die aktuell ausgewählte Datei anzuzeigen, da das Feld außerhalb des Bildschirms liegt. Ich wollte sofort einreichen, wenn eine Datei ausgewählt wurde, daher ist das für mich kein Problem, aber Sie benötigen einen etwas anderen Ansatz, wenn Ihre Situation anders ist.

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>

Dieser Code funktioniert für mich. Versuchen Sie das zu tun?

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

Meine Lösung für Safari mit jQuery und jQuery-ui:

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

Hier ist eine reine JavaScript-Lösung für dieses Problem. Funktioniert gut in allen Browsern

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

Es gibt Möglichkeiten, Ereignisse an das Steuerelement umzuleiten, aber erwarten Sie nicht, dass Sie Ereignisse einfach selbst an das Steuerelement auslösen können, da die Browser versuchen, dies aus (guten) Sicherheitsgründen zu blockieren.

Wenn das Dateidialogfeld nur angezeigt werden soll, wenn ein Benutzer auf etwas klickt, beispielsweise weil Sie besser aussehende Schaltflächen zum Hochladen von Dateien wünschen, sollten Sie sich ansehen, was Shaun Inman sich ausgedacht hat .

Ich war in der Lage, eine Tastaturauslösung durch kreatives Verschieben des Fokus innerhalb und außerhalb der Steuerung zwischen Keydown-, Tastendruck- und Tastendruckereignissen zu erreichen. YMMV.

Mein aufrichtiger Rat ist, dies in Ruhe zu lassen, denn dies ist eine Welt voller Browser-Inkompatibilitätsschmerzen. Kleinere Browser-Updates blockieren möglicherweise auch Tricks ohne Vorwarnung, und Sie müssen Hacks möglicherweise immer wieder neu erfinden, damit sie funktionieren.

Ich habe dies vor einiger Zeit untersucht, weil ich eine benutzerdefinierte Schaltfläche erstellen wollte, die den Dateidialog öffnet und den Upload sofort startet. Ich habe gerade etwas bemerkt, das dies möglich machen könnte - Firefox scheint den Dialog zu öffnen, wenn Sie irgendwo auf den Upload klicken. Folgendes könnte es also tun:

1. Erstellen Sie einen Datei-Upload und ein separates Element mit einem Bild, das Sie als Schaltfläche verwenden möchten
2. Ordnen Sie sie so an, dass sie sich überlappen und das Hintergrundelement und den Rand des Dateielements transparent machen, sodass nur die Schaltfläche sichtbar ist
3. Fügen Sie das Javascript hinzu, damit der IE den Dialog öffnet, wenn auf die Schaltfläche / Dateieingabe geklickt wird
4. Verwenden Sie ein Änderungsereignis, um das Formular zu senden, wenn eine Datei ausgewählt wird

Dies ist nur theoretisch, da ich bereits eine andere Methode verwendet habe, um das Problem zu lösen, aber es könnte funktionieren.

Ich hatte ein <input type="button">Tag nicht sichtbar. Ich habe das "onClick"Ereignis an eine sichtbare Komponente eines beliebigen Typs wie ein Etikett angehängt. Dies erfolgte entweder mit den Entwicklertools von Google Chrome oder mit dem Firebug von Mozilla Firefox mit dem Rechtsklick auf den Befehl "HTML bearbeiten". Geben Sie in diesem Fall das folgende Skript oder ähnliches an:

Wenn Sie JQuery haben:

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

wenn nicht:

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

Vielen Dank.

Hey, diese Lösung funktioniert. Zum Download sollten wir MSBLOB verwenden

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

Für AngularJS oder sogar für normales Javascript.

Dies ist jetzt in Firefox 4 möglich, mit der Einschränkung, dass es als Popup-Fenster gilt und daher immer dann blockiert wird, wenn ein Popup-Fenster gewesen wäre.

Hier ist eine Lösung, die für mich funktioniert: 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 mit "kleiner" JQuery-Hilfe:

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

Stellen Sie nur sicher, dass maskfied vollständig durch ein echtes Upload-Feld abgedeckt ist.

Sie können dies gemäß der Antwort im Dialogfeld Datei öffnen auf dem Tag <a> tun

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

Ich habe festgestellt, dass, wenn die Eingabe (Datei) außerhalb des Formulars liegt, das Auslösen des Klickereignisses den Dateidialog aufruft.

Hoffentlich hilft das jemandem - ich habe 2 Stunden damit verbracht, meinen Kopf dagegen zu schlagen:

Wenn Sie in IE8 oder IE9 das Öffnen einer Dateieingabe mit Javascript in irgendeiner Weise auslösen (glauben Sie mir, ich habe sie alle ausprobiert), können Sie das Formular nicht mit Javascript senden, sondern es schlägt nur stillschweigend fehl.

Das Senden des Formulars über eine normale Schaltfläche zum Senden funktioniert möglicherweise, aber das Aufrufen von form.submit (); wird stillschweigend scheitern.

Ich musste meine Schaltfläche zum Auswählen von Dateien mit einer transparenten Dateieingabe überlagern, die funktioniert.

Das hat bei mir funktioniert:

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

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

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

Es ist nicht unmöglich:

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

Aber irgendwie funktioniert es nur, wenn dies in einer Funktion ist, die über ein Klickereignis aufgerufen wurde.

Möglicherweise haben Sie folgendes Setup:

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

Sie können verwenden

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