IE9 Dateieingabe Triggerung mit Javascript

7

Ich hatte einen Beitrag hier:

.change agiert seltsam in IE9

Ich habe jedoch einen neuen Vorfall bezüglich der Handhabung des Datei-Uploads in der Form erfahren und war neugierig, ob jemand auf dieses Problem gestoßen ist.

Mein ursprüngliches Problem war, dass ich kein onchange-Ereignis zum arbeiten bekommen konnte und ich dachte, dass es vielleicht ein Problem mit meinem Javascript war, aber ich fand, dass es damit zusammenhängt, wie das Formular aktiviert wird.

>

Ich habe eine Dateieingabe

%Vor%

Jetzt habe ich zwei Dinge gemacht.

Ich habe die Eingabe ausgeblendet und eine Schaltfläche (für eine bessere Steuerung der Gestaltung) erstellt, die die Eingabe aktiviert.

%Vor%

und dann das JS für die Interaktion zwischen den beiden:

%Vor%

und natürlich ein submit für das Formular (ich benutze Eltern in diesem Beispiel, aber Sie in meinem tatsächlichen Code verwende ich die Formular-ID).

%Vor%

Wenn ich auf "mybutton" klicke, wird das erwartete Ergebnis angezeigt. Mein Browserfenster öffnet sich und ich kann eine Datei von meinem Computer auswählen. Auch wenn ich die Datei in allen Browsern außer IE ändere, wird das Onchange-Ereignis ausgelöst. Wenn ich nun das Formular ansehe und manuell auf den "Durchsuchen" -Button klicke und eine Datei wähle, wird das Onchange-Ereignis ausgelöst. Im Grunde behandelt der Browser das Klicken auf die eigentliche Dateischaltfläche anders als das Ausführen eines $ ("input [type = file]"). Click ()

weiß jemand, wie man das repariert?

    
Brodie 12.01.2012, 16:23
quelle

3 Antworten

33

Wie bereits gesagt, IE ist sehr streng bei der Einreichung von Formularen mit Dateieingaben. Dateieingaben müssen mit einem echten Mausklick ausgelöst werden, um die Formularübergabe zu ermöglichen. Außerdem scheint es einen Fehler mit IE9 und Dateieingaben zu geben.

Die gute Nachricht ist, dass es eine Möglichkeit gibt, die Sicherheitsbeschränkung von IE mit einem Label zu umgehen:

  1. Erstellen Sie ein reguläres Label-Tag, das mit Ihrer Dateieingabe verknüpft ist. Das Label wird die Eingabedatei wie gewohnt auslösen.
  2. Verkleiden Sie das Label als Schaltfläche mit CSS.
  3. Die Dateieingabe muss angezeigt werden (für IE8), kann aber mit "visibility: hidden" ausgeblendet werden. IE8 wird diesen Hack akzeptieren.
A. Clement 18.03.2013, 17:46
quelle
2

Wenn ich mich nicht sehr täusche, können Sie das nicht ändern, da dies (ursprünglich) dazu gedacht war, die Privatsphäre von Benutzern zu schützen und trotzdem das Hochladen von Dateien ohne explizite Benutzererlaubnis / Aktion zu vermeiden.

    
Ali 12.01.2012 16:27
quelle
0
  1. stelle sicher, dass dein Code in $("document").ready(function(){... here..});

  2. ist
  3. scheint Dateieingaben zu sein, wenn sie mit .live("change", function(){}); nicht richtig funktionieren

Das andere Styling-Zeug ist etwas anderes, aber das CSS ist nicht so kompliziert - schöner Datei-Upload

    
bizl 12.05.2012 17:44
quelle