2017-11-21 10 views
0

Ich verwende jQuery und Ajax auf einer Schaltfläche, um den Wert des Attributs "accept" für ein Element zum Hochladen von Eingabedateien zu aktualisieren. Aber ich kann es nur mit Firefox machen. In Chrome funktioniert das Trigger-Klickereignis nicht und auf IE8 funktioniert es, aber die ausgewählte Datei kann nicht hochgeladen werden. Was soll ich machen? Dies ist mein Code in handleAjaxResponseSuccess Funktion:So lösen Sie einen Klick auf ein Element der Eingabedatei aus, indem Sie auf ein anderes Element klicken

$('#inputFile').attr('accept', '.jpg, .png'); 
$('#inputFile').click(); 
//in Firefox and IE8, it shows a file dialog that allows choosing file to upload. But in Chrome, the file dialog does not appear, and in IE8, the selected file cannot be uploaded 

Mein HTML-Code

<button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class=""></button> 
<input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" > 
+0

'Auf Chrom, der trig Klickereignis funktioniert nicht, das ist Absicht. Aus Sicherheitsgründen können in einigen Browsern keine Ereignisse auf Dateieingaben gefälscht werden. 'accept' funktioniert nur in IE10 und höher und nicht in Edge. Siehe MDN Kompatibilitätstabelle: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility –

+0

Ich kann das sehen. Gibt es eine Lösung für diesen Fall? – omglolgg

+0

Nicht zuverlässig, nein. Selbst wenn dies der Fall ist, wird es wahrscheinlich durch zukünftige Aktualisierungen des Browsers unterbrochen. Sie müssen Ihre UI so erstellen, dass der Benutzer den geöffneten Dialog öffnen muss –

Antwort

0

Für die aus Sicherheitsgründen Dateieingabe einige Browser nicht zulassen direkt auszulösen. Die Aktion zum Öffnen des Dialogfelds MUSS durch eine Benutzerinteraktion aufgerufen werden (ein Klick zum Beispiel) UND die Eingabedatei muss sichtbar sein (Display! = Keine) und fokussiert.

Sie zeigen können, Dialog und nach auszublenden wie diese zu öffnen:

getAcceptedExtension = function() { 
 
    $('#inputFile').attr('accept', '.jpg, .png'); 
 
    $('#inputFile').show(); 
 
    $('#inputFile').focus(); 
 
    $('#inputFile').click(); 
 
    $('#inputFile').hide(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class="">CLICK ME</button> 
 
<input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" >

+0

Ich habe versucht, dies in meinem Code anzuwenden, aber es funktioniert immer noch nicht. Übrigens danke. – omglolgg

0

eine grundlegende und einfache Möglichkeit wäre dies:

$('#b1').on('click',function(){ 
    alert("button #1 is clicked"); 
    $('#b2').click(); 
}); 
$('#b2').on('click',function(){ 
    alert("button #2 is clicked"); 
}); 

Jsfiddle: https://jsfiddle.net/vf65pzhj/1/

Verwandte Themen