16 Stimmen

Datei-Eingabe-Dialog öffnen und Upload bei Änderung im IE möglich?

Dies ist im Wesentlichen und vereinfacht, was ich jetzt habe:

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="stackoverflow.com/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

Was es (perfekt) in Chrome 11 und FF 4 tut:

  1. Das Formular ist ausgeblendet.
  2. Sie klicken auf den Link
  3. Dialogfeld "Datei auswählen" wird geöffnet
  4. Sie wählen eine Datei
  5. Dialog wird geschlossen
  6. Formular wird eingereicht
  7. Skript im iframe wird ausgeführt und Foto wird ersetzt

Sehr hightechmäßig und süß.

Im IE funktioniert das alles, mit Ausnahme von [6]. Das Formular wird nicht abgeschickt. Javascript-Fehler: "Zugriff verweigert". Es spielt keine Rolle, wie das Formular unsichtbar ist, solange der Dialog mit input.click() das Formular kann bei Änderungen nicht eingereicht werden. (Die Funktion onchange wird problemlos ausgeführt. Der Fehler tritt nur auf, wenn form.submit() aufgerufen wird.)

Das alles kann ich akzeptieren. IE ist scheiße. Ich lebe mit ihm.

Meine bisherige Lösung war die Überprüfung der navigator für "MSIE" und dann beim Anklicken des Links, anstatt den Dialog zu öffnen, das Formular (mit der Dateieingabe) anzeigen. Dann muss der Benutzer auf die eigentliche, hässliche Dateieingabe klicken und dann funktioniert alles gut. Aber hässlich.

Die Frage ist eine doppelte:

  1. Gibt es eine Möglichkeit, dies im IE genauso cool zu machen wie in Chrome? OHNE lästigen Flash/Java-Mist. Nur html-Elemente und Javascript.
  2. Wenn nicht: gibt es eine Möglichkeit, nach dem Öffnen des Dialogs über einen Link auf form.submit()-Unterstützung zu prüfen (neben !navigator.contains("MSIE") )?

[2] könnte die im IE ausgelöste Ausnahme "Zugriff verweigert" abfangen, aber dann ist es zu spät: Der Benutzer hat den Dialog bereits geöffnet und das Foto aufgerufen. Sie wollen ihn nicht dazu zwingen, das noch einmal zu tun. (Auch IE-Benutzer haben das nicht verdient.)

PS. Ich bin nur an Chrome 10+, Firefox 3.6+ und IE8+ interessiert.

PS. Könnte wichtig sein: Das Dateieingabeelement kann sich nicht in der Nähe des Links befinden, da sich der Link in einem Formular befindet und dieses Formular vom Datei-Upload-Formular getrennt ist (sein muss).

UPDATE
Das Zweitbeste: Unterstützung für dieses High-Tech-Verhalten aufspüren, das nur im IE nicht funktioniert. Ich möchte nicht navigator.appName.contains('MSIE') denn das ist nicht flexibel und nicht unbedingt wahr.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X