JQuery: Ändern Sie das Ereignis, um die Eingabedatei zu aktivieren IE

Ich weiß, dass dies einige Monate zu spät ist, aber ich habe gerade das gleiche Verhalten in IE7 getroffen. In allen anderen Browsern erfolgt das Änderungsereignis für Dateieingaben nach der Dateiauswahl. In IE7 geschieht dies nur, wenn Sie die Dateiauswahl erneut auslösen oder auf Unschärfe setzen.

So habe ich das Problem behoben:

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            if($input.val().length > 0) {
              someFunction();
            }
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Technisch gesehen können/sollten Sie die Hack-Bedingung nur auf IE7 filtern, da IE8 sich beim Änderungsereignis ordnungsgemäß verhält, aber es hat dasselbe Verhalten wie IE7, wenn Timeouts angehalten werden, während browserbezogenes Chrome sichtbar ist ( O), so funktioniert es wie es ist.

Das ist wirklich spät, aber ich hatte das gleiche Problem und ich habe es gelöst, indem ich ein <label>-Tag mit einem einfachen Problemumgehung für Firefox verwendet habe.

http://jsfiddle.net/djibouti33/uP7A9/

Die Ziele:

1. benutzer dürfen eine Datei mit der Standardeingabesteuerung für HTML-Dateien hochladen
2. standard-HTML-Dateieingabesteuerung ausblenden und eigenes Styling anwenden
3. nachdem der Benutzer die hochzuladende Datei ausgewählt hat, senden Sie das Formular automatisch ab

Die Browser:

• Firefox, Chrome, IE8/9, Safari
• IE7 hat nicht funktioniert, aber es könnte sein, wenn Sie diesen Browser zu der unten beschriebenen Problemumgehung hinzufügen

Die Ausgangslösung:

1. Blenden Sie die Dateieingabe aus, indem Sie sie außerhalb des Bildschirms positionieren. Wichtig, nicht anzuzeigen: keine, da einige Browser dies nicht mögen.
2. Fügen Sie der Seite ein weiteres Stilelement hinzu (Link, Schaltfläche). 
3. Hören Sie auf einen Klick auf dieses Element und senden Sie dann programmgesteuert einen Klick an die Dateieingabe, um den nativen "Datei-Explorer" auszulösen.
4. Auf das onchange-Ereignis der Dateieingabe achten (tritt auf, nachdem ein Benutzer seine Datei ausgewählt hat) 
5. Senden Sie das Formular

Das Problem:

1. IE: Wenn Sie programmgesteuert einen Klick an eine Dateieingabe senden, um diese zu aktivieren (2), wird durch das programmgesteuerte Senden des Formulars (5) ein Sicherheitsfehler ausgelöst

Die Workaround-Lösung:

1. Das gleiche wie oben
2. Nutzen Sie die im Tag integrierten Eingabehilfefunktionen (durch Klicken auf ein Label wird das zugehörige Steuerelement aktiviert), indem Sie Ein Tag statt eines Links/einer Schaltfläche gestalten
3. Hören Sie auf das Onchange-Ereignis der Dateieingabe
4. Senden Sie das Formular
5. Aus irgendeinem Grund können Mozilla-Browser keine Dateieingabe aktivieren, indem Sie darauf klicken. 
6. Hören Sie bei Mozilla auf den Klick auf das Etikett und senden Sie ein Klickereignis an die Dateieingabe, um es zu aktivieren.

Hoffe das hilft! Weitere Informationen zu html/js/css, mit denen alles funktioniert, finden Sie in jsfiddle.

Formatiere es so:

$("#attach").change(function() { 
  alert('I Changed');
});

Update: Nachdem wir eine andere Frage zu diesem Thema beantwortet hatten, erkannten wir, dass dies im Rahmen des jQuery 1.4.2-Ereignisumschreibens behoben wurde. Aktualisieren Sie einfach die neueste Version um das change-Ereignisproblem mit <input type="file" /> im IE zu beheben.

Ich habe die folgende Lösung verwendet. Ich habe versucht, es so in sich wie möglich zu machen.

(function($) {
    if ($.browser.msie == false)
        return;

    $('input[type=file]').live('click', function(e) {
        var self = this;
        var blur = function() {
            $(self).blur();
        }
        setTimeout(blur, 0);
    });

})(jQuery);

Dies ist wahrscheinlich ein Problem mit einer Race-Bedingung mit Eingabefeldern im IE. Mit setTimeout wird dann die ausgeführte Funktion registriert, dass eine Änderung stattgefunden hat. Wenn der UI-Code im onChangeEvent ausgeführt wird, wurde dieses Ereignis noch nicht ausgelöst, wie es dem IE erscheint.

Ich habe eine ähnliche Situation gelöst, indem ich in meinem Änderungshandler Folgendes ausgeführt habe:

if (jQuery.browser.msie) { setTimeout(DoSomeUIChange, 0); } else { DoSomeUIChange(); }

DoSomeUIChange wird nach dem aktuellen Code in der Ereigniswarteschlange ausgeführt und entfernt so die Race-Bedingung.

Ich hatte das gleiche Problem mit IE (einschließlich IE 9). Die Logik der Benutzeroberfläche lautet:

1. wenn Sie auf ein div-Element klicken, wird das click-Ereignis auf einem file-input-element ausgelöst, sodass der Benutzer auf ein Dialogfeld mit div-Trigger-Datei klickt 
2. binden Sie den Ereignishandler change an den file-input-element, um sicherzustellen, dass die form gesendet wird, wenn das Dialogfeld zum Öffnen der Datei geschlossen wird

Die App (läuft in einem iframe) funktioniert auf Chrome und FF wie ein Zauber. Aber bald stellte sich heraus, dass es bei IE nicht funktioniert, als der Benutzer eine Datei auswählte und den Dialog schloss, den das Formular nicht übermittelte.

Die endgültige Lösung besteht darin, die Logik Nr. 1 "Klicken auf div element trigger click event on file input element" zu löschen und den Benutzer direkt auf file input element klicken zu lassen. Dann funktioniert es.

Übrigens, der Grund, warum wir ein div-Element haben, ist, dass wir die gerenderten Steuerelemente des Browsers ausblenden möchten, da sich alles im Hintergrundbild befindet. Wenn Sie jedoch display auf none setzen, kann das Steuerelement nicht auf ein Benutzerinteraktionsereignis reagieren. Also verschieben wir den file-input-element außerhalb des View-Ports und verwenden ein div-Element, um ihn zu ersetzen. Da dies im IE nicht funktioniert, verschieben wir file-input-element zurück und setzen opacity auf 0. Unter IE 8 oder kleiner, der opacity nicht unterstützt, verwenden wir einen Filter, um ihn transparent zu machen: 

#browse {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

In IE6 und IE7 hat dies immer für mich funktioniert.

$('#id-of-input-type-file').change(function(){});

Ich habe diese Lösung gefundenIn HTML-Dateielement ausblenden (Anzeige nicht verwenden: keine, funktioniert nicht im IE).

<div style="width: 0px; height: 0px; overflow: hidden;">
  <input id="ifile_template" type="file" onchange="this.focus(); this.blur();"/>
</div>

In Javascript für IE bind die Funktion zum Verwischen und für FF die CH-Bindungsänderung ():

$(iFile).blur(
  function () {
    ...some code...
  }
);

// FF, CH
$(iFile).change(
  function () {
  ...some code...
  }
);

In IE funktioniert das onchange-Ereignis einwandfrei, wenn es direkt im html-Tag ausgefüllt wird. Mögen:

<input type="file" onchange="uploader.upload()" />

Für IE Sie können das "onfocus" -Ereignis verwenden, um die Änderung beim Hochladen der Datei abzufangen. Sobald das Dialogfeld zum Durchsuchen von Dateien geschlossen wird, wird das Ereignis onfocus ausgelöst. Sie können dies überprüfen, indem Sie diese Zeile zu Ihrer Seite hinzufügen:

<input type="file" onfocus="javascript:alert('test');" />

Sobald der Dialog geschlossen ist, wird die Warnmeldung angezeigt.

Diese Lösung ist nur für IE, nicht für FF oder Chrome.

Meine Lösung:

setInterval(function()
{
    if ($.browser.msie) $("input[type=file]").blur();
},500);

Nicht hübsch, aber es funktioniert. ; D

Schauen Sie sich diese Geige an http://jsfiddle.net/uP7A9/531/

HTML:

<input type="file" name="PicturePath" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

jQuery:

$("input[type=file]#fileUpload").on("change", function () {
    alert('hi')
});

es funktioniert für alle getesteten Browser.

Ich kann zumindest bestätigen, dass es nur dann funktioniert, wenn ein Unschärfeereignis auftritt, ähnlich einem Radio und einem Kontrollkästchen im IE. Ich werde wahrscheinlich ein visuelles Element hinzufügen müssen, das der Benutzer anklicken und mir mitteilen kann, wann er seine Datei ausgewählt hat. 

lame.

$("#attach").attr("onChange", "alert('I changed')");

Es funktioniert im IE, aber wenn Sie das Verhalten "live" emulieren möchten, sollten Sie bei der Erstellung jedes neuen Elements das Attribut "onChange" hinzufügen.

jQuery scheint das Ereignis propertychange nicht zu erkennen. Ich habe es dem DOM-Knoten mit den attachEvent() des IE hinzugefügt.

var userChoseFile = function($input) {
    // ...
}

var $input = $(/* your file input */);
$input[0].attachEvent('onpropertychange', function() { 
    userChoseFile($input);
});