Wie rufe ich eine JavaScript-Funktion auf, nachdem ich eine Datei im Fenster „Datei auswählen“ ausgewählt und geschlossen habe?

Lesezeit: 3 Minuten

Benutzer-Avatar
coderex

Ich habe ein Dateieingabeelement

<input type="file" id="fileid">

Wie rufe ich eine JavaScript-Funktion auf, nachdem ich eine Datei aus dem Dialogfenster ausgewählt und geschlossen habe?

  • Eine dynamischere Lösung wäre: jQuery(“input[type=file]”).change(function () { alert(jQuery(this).val(); ); } ); was für alle Dateifelder funktionieren würde

    – Mike Klagg

    10. Mai 2010 um 19:59 Uhr

Benutzer-Avatar
Mike Clagg


jQuery("input#fileid").change(function () {
    alert(jQuery(this).val())
});

  • Es sollte funktionieren. Führen Sie dieses Skript während $(document).ready()?

    – BalusC

    10. Mai 2010 um 23:13 Uhr

  • @coderex – Wie testen Sie das? Das Öffnen und Schließen funktioniert nicht, da Sie es nicht getan haben Rückgeld alles, müssen Sie tatsächlich eine Datei auswählen, um das Ereignis auszulösen.

    – Nick Craver

    11. Mai 2010 um 0:15 Uhr

  • Dies funktioniert, wenn Sie a auswählen anders Datei, wird aber nicht ausgelöst, wenn Sie dieselbe Datei auswählen (und diese Frage muss noch beantwortet werden).

    – personne3000

    14. September 2015 um 6:46 Uhr

<input type="file" id="fileid" >

Die Änderung funktioniert, wenn Sie script unter die Eingabe setzen

<script type="text/javascript">
$(document).ready(function(){
    $("#fileid").on('change',function(){
        //do whatever you want
    });
});
</script>

Benutzer-Avatar
Ing Cy

<script>
       function example(){
               alert('success');
       }
</script>


<input type="file" id="field" onchange="example()" >

  • Bitte fügen Sie Ihrer Antwort einige zusätzliche Informationen hinzu.

    – Syeda Zunaira

    26. November 2014 um 5:49 Uhr

Dieser getestete Code hilft Ihnen:

$("body").on('change', 'input#fileid',function(){
    alert($(this).val());});

Versuchen Sie, oben in Ihrer Datei zu deklarieren:

<script type="text/javascript">
  // this allows jquery to be called along with scriptaculous and YUI without any conflicts
  // the only difference is all jquery functions should be called with $jQ instead of $
  // e.g. $jQ('#div_id').stuff instead of $('#div_id').stuff
  $jQ = jQuery.noConflict();
</script>

dann:

<script language="javascript">   
$jQ(document).ready(function (){
    jQuery("input#fileid").change(function () {
        alert(jQuery(this).val());
    });
});

(Sie können beide in dasselbe stecken <script> -Tag, aber Sie könnten zum Beispiel einfach den ersten Teil in Ihrem übergeordneten Layout deklarieren und $jQ verwenden, wenn Sie jQuery in Ihren untergeordneten Layouts verwenden, was beispielsweise bei der Arbeit mit RoR sehr nützlich ist.)

Wie in den Kommentaren in einer anderen Antwort erwähnt, wird dies erst ausgelöst, nachdem Sie eine Datei ausgewählt und auf Öffnen geklickt haben. Wenn Sie einfach auf “Datei auswählen” klicken und nichts auswählen, funktioniert es nicht

Benutzer-Avatar
Adi Prasetyo

Ich denke, Ihr Ziel ist erreichbar, aber AFAIK, kein solches Ereignis.

Aber um das zu erreichen, müssen Sie mit 3 Event zusammenarbeiten, ich nehme an, Sie müssen nur den Dateinamen kennen. Ich habe herumlaufen erstellt hier

  1. Erstens wurde das Änderungsereignis gerade ausgelöst, als tatsächliche Änderung passieren, wird die Auswahl derselben Datei kein Änderungsereignis auslösen, also öffnen Sie den Dialog und brechen Sie ihn ab.
  2. Wenn Sie dann auf Datei auswählen klicken, erhält das Eingabeelement den Fokus, wenn der Popup-Dateidialog geöffnet wird, verliert das Eingabeelement den Fokus.
  3. Wenn der Popup-Dateidialog geschlossen wird, erhält das Eingabeelement wieder den Fokus.
  4. Sie können also die clientseitige Validierung auf der Clientseite ausführen, wenn das Eingabeelement den Fokus “wieder” verliert.

1229260cookie-checkWie rufe ich eine JavaScript-Funktion auf, nachdem ich eine Datei im Fenster „Datei auswählen“ ausgewählt und geschlossen habe?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy