jQuery: Simulation eines Klicks auf ein <input type = "file" /> funktioniert nicht in Firefox?

Mögliche Duplizieren:
In JavaScript can I make a “click” event fire programmatically for a file input element?jQuery: Simulation eines Klicks auf ein <input type = "file" /> funktioniert nicht in Firefox?

ich eine Web-Seite haben, die wie folgt

<html> 
    <head> 
     <title>File Upload Click Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div> 
     <input type="file"></input> 
    </body> 
</html>

Mein Ziel die div einen Klick erhöhen ist zu haben, sieht Ereignis auf der Dateieingabe, und das scheint genau so zu funktionieren, wie ich es würde pect in IE und Chrome, aber funktioniert nicht in Firefox (kein Dateibrowser wird geöffnet, wenn Sie auf die div klicken).

Gibt es eine Möglichkeit, dies in FF arbeiten zu lassen?

Quelle

2009-12-01 kristian

Es wird in FF4 kommen: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method –

diese Antwort Siehe http://stackoverflow.com/questions/210643/in -javascript-kann-ich-mache-ein-klicken-event-fire-programmatically-for-a-file-input-e/3030174 # 3030174 es funktioniert in FF auch – TheVillageIdiot

Heute Morgen habe ich das Skript getestet und es funktioniert gut in Firefox 4. Firefox 4 ermöglicht Klickereignis bei der Dateieingabe. – kriom

Gibt es eine Möglichkeit, dies in FF arbeiten zu lassen?

Nein, und es funktioniert auch nicht in den meisten gängigen Versionen von IE. Der IE öffnet den Dialog, aber sobald Sie eine Datei ausgewählt haben, wird das Formular nicht wirklich gesendet.

Verzicht Hoffnung. Der einzige Weg, eine Datei-Upload-Box zu fälschen, ist die Transparenz-Technik, und das ist wirklich überhaupt nicht zu empfehlen, da Browser Datei-Upload-Boxen intern anders gestalten (oder sogar ein Datei-Upload-Steuerelement ohne Browse-Dialog bereitstellen), Es ist sehr wahrscheinlich, dass Sie eine inoperable Form haben.

Lernen Sie, das Feld zum Hochladen von grauen Dateien zu lieben, oder verwenden Sie progressive Verbesserungen, um es durch Flash zu ersetzen, wo es verfügbar ist.

Quelle

2009-12-02 00:01:40 bobince

+42

Verlassen Hoffnung. Prüfen. – kristian

Es funktioniert jetzt in Firefox 4. –

Nun danke, dass ich nicht mehr Zeit verschwenden darf ..Ich habe schon ein paar Tage mit der Hoffnung darauf verbracht. –

Hier ist die Problemumgehung (FF). Die HTML-Bit:

<label>Upload Business Logo</label> 
<input type="file" name="logo" id="logo" class="file-upload" /> 
<input type="text" id="text-logo" class="text-upload" readonly/> 
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS für die Eingabedatei Typ:

.file-upload { display:none; }

Das Bit jQuery:

//bind click 
$('#btn-logo').click(function(event) { 
    $('#logo').click(); 
}); 

//capture selected filename 
$('#logo').change(function(click) { 
    $('#text-logo').val(this.value); 
});

Nach Formular abgesendet haben, die versteckte Eingabedatei wird die Datei hochgeladen werden. this helps :)

Quelle

2012-02-20 01:15:34

Haben Sie den Code versucht? Wenn es so einfach wäre, warum sollte der Fragesteller hier sein? Warum sollte ich hier sein? Zuletzt habe ich überprüft, dass Sie den Wert einer Dateieingabe nicht festlegen können. Und anscheinend können Sie auch keine Ereignisse auf ihnen auslösen. Wahrscheinlich Sicherheitsgründe. – Stoutie

Ich nehme es zurück, sieht so aus, als wäre es so einfach. Aber es funktioniert nicht, wenn Sie es in der Konsole versuchen. Wenn ich den Code in mein Dokument einfüge, scheint es gut zu funktionieren. Derp. – Stoutie

+1 das funktioniert perfekt, nur nicht in der Konsole! Seltsam, ich denke, es ist aus Sicherheitsgründen. – ksloan

jQuery: Simulation eines Klicks auf ein <input type = "file" /> funktioniert nicht in Firefox?

Antwort

Verwandte Themen