webentwicklung-frage-antwort-db.com.de

jQuery-Änderungsmethode für Eingabetyp = "Datei"

Ich versuche, jQuery mit seiner einfachen und eleganten API zu 100% zu nutzen, aber ich bin auf eine Inkonsistenz zwischen der API und direktem HTML gestoßen, die ich nicht ganz herausfinden kann.

Ich habe ein AJAX Datei-Uploader-Skript (das richtig funktioniert), das ich jedes Mal ausführen möchte, wenn sich der Dateieingabewert ändert. Hier ist mein Arbeitscode:

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

Wenn ich das Ereignis onchange in eine jQuery-Implementierung konvertiere:

$('#imageFile').change(function(){ uploadFile(); });

das Ergebnis ist nicht dasselbe. Mit dem Attribut onchange wird die Funktion uploadFile() immer dann aufgerufen, wenn der Wert wie erwartet geändert wird. Mit der Ereignisbehandlungsroutine jQuery API .change() wird das Ereignis jedoch nur ausgelöst, wenn ein Wert zum ersten Mal geändert wird. Danach vorgenommene Wertänderungen werden ignoriert. Das scheint mir falsch, aber das kann doch kein Versehen von jQuery sein, oder?

Hat jemand das gleiche Problem festgestellt und haben Sie eine andere Problemumgehung oder -lösung als die oben beschriebenen?

66
gurun8

aktualisiert der Ajax Uploader Ihr Eingabeelement? In diesem Fall sollten Sie die .live () -Methode in Betracht ziehen.

 $('#imageFile').live('change', function(){ uploadFile(); });

aktualisieren:

ab jQuery 1.7 solltest du jetzt .on () verwenden

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
87
Luis Melgratti

Ab jQuery 1.7 ist die Methode .live () veraltet. Verwenden Sie .on (), um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate () anstelle von .live () verwenden. Siehe: http://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });
63
macio.Jun

Ich konnte IE8 + nicht zum Laufen bringen, indem ich dem Dateieingabetyp einen jQuery-Ereignishandler hinzufügte. Ich musste auf die alte Schule gehen und das Attribut onchange="" Zum Eingabe-Tag hinzufügen:

<input type='file' onchange='getFilename(this)'/>

function getFileName(Elm) {
   var fn = $(Elm).val();
   ....
}

EDIT:

function getFileName(Elm) {
   var fn = $(Elm).val();
   var filename = fn.match(/[^\\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}
10
rodney hise