Javascript OnChange Ereignis und IE 7,8

[RWarnecke]

Hallo zusammen, ich verzweifel noch. Ich habe ein Upload-Seite geschrieben. Diese funktionniert im Firefox, im Chrome und im Opera ohne Probleme nur im IE 7 und 8 macht die Seite Probleme.

Hier der Code fon der JavaScript-Function, die die Probleme verursacht :

Code:

<script type="text/javascript">
var Zeile = 5;
var fileup = 0;
function jsAddedRow() {
   if (document.PictureEntry.elements['file_upload[' + fileup + ']'].value != "") {
       fileup += 1;
      var TR = document.getElementById("PictureTable").insertRow(Zeile);
      TR.setAttribute('height', '40');
      Zeile += 1;
      var TD1 = document.createElement("td");
      var TD1text = document.createTextNode("Bild hochladen :\u00A0");
      TD1.appendChild(TD1text);
      TD1.align = "right";
      var TD2 = document.createElement("td");
      TD2.align = "left";
      TD2.setAttribute("style", "padding:6px;");
      inputfile = document.createElement("INPUT");
      inputfile.type = "file";
      inputfile.accept = "image";
      inputfile.size = "60";
      inputfile.name = "file_upload[" + fileup + "]";
      inputfile.onchange = function() {
         jsSelectedPicture(this.value);
         jsAddedRow();   
      };
      TD2.appendChild(inputfile);
      TR.appendChild(TD1);
      TR.appendChild(TD2);
   }
}
</script>

Das Element "file_upload" ist ein Array von INPUT-Zeilen vom Type File. Rufe ich die beiden Funktionen jsSelectedPicture und jsAddedRow so im IE auf, dann werden die Funktionen ausgeführt :

Code:

<input type="file" accept="image" size="60" name="file_upload[0]" onChange="jsSelectedPicture(this.value);jsAddedRow();" />

Bei der dynamisch erzeugten INPUT-Zeile wird nur jsSelectedPicture ausgeführt und dann bricht der IE in der IF-Abfrage ab mit dem Fehler

Zitat:

Meldung: 'document.PictureEntry.elements[...].value' ist Null oder kein Objekt

Hat jemand eine Idee, warum das so ist und wie ich den Fehler beheben kann ?

[Phoenix]

Bei sowas gehe ich immer her und debugge das Javascript im Browser.
Das geht relativ gut z.B. mit dem WebDeveloper Express.

Wenn Du kein Debugging magst, dann würde ich bei diesem Fehler hergehen und den eingrenzen.

Also per JS (z.B. mit Alert('Test ' + value) die einzelnen Teile austesten.
document wird wohl definiert sein. Ist document.PictureEntry definiert?
Wenn ja: Ist document.PictureEntry.elements definiert und ein gültiges Array?
UNd so weiter durchhangeln.

Ich kann mir aber gut vorstellen, dass es schon document.PictureEntry im IE nicht gibt.

[RWarnecke]

Hallo Sebastian,

danke erstmal für Deine Antwort. Ich habe da nur ein Verständnisproblem. Die erste InputZeile vom Type File steht ja so direkt im Sourcecode der Webseite :

Code:

<input type="file" accept="image" size="60" name="file_upload[0]" onChange="jsSelectedPicture(this.value);jsAddedRow();" />

Wenn ich hier im IE auf Durchsuchen klicke funktioniert alles Wunderbar. Das heißt für mich, meine Funktion ist in Ordnung. Nur wenn ich im IE bei der neu erstellten Zeile durch die Funktion jsAddedRow auf Durchsuchen klicke, kommt nach der Auswahl einer Datei die Scriptfehlermeldung. Die Variable fileup zählt richtig. Warum greift hier das Property elements nichtmehr im IE. Bei Firefox und Co klappt es.

Zur kurzen Erklärung, der Name PictureEntry ist der Formularname indem sich dieser Array Input-Tag vom Type File befindet.

Ich habe es ebenfalls mit setAttribute ausprobiert, dass OnChange-Ereignis an den Input-Tag zubinden. Im IE funktioniert es nicht, Firefox und Co ja.

Edit: In der Variable fileup, wird ja die Anzahl der Input-Tag gespeichert. Ich möchte ja durch die IF-Abfrage erreichen, wenn ich in einem anderen Feld den Wert ändere nicht wieder eine neue Zeile hinzugefügt wird, sondern nur dann, wenn auch das letzte Feld einen Wert entält.

[omata]

Zitat von RWarnecke:

Hallo zusammen, ich verzweifel noch. Ich habe ein Upload-Seite geschrieben. Diese funktionniert im Firefox, im Chrome und im Opera ohne Probleme nur im IE 7 und 8 macht die Seite Probleme.

Welch Überraschung, der IE macht mal wieder Schwierigkeiten

Vielleicht werden die Elemente eben einfach nicht aktualisiert, sodass es eben nur mit dem Ersten funktioniert, da dieses in der Seite definiert wurde.

Leg doch mal eine ID an...

Code:

<input type="file" accept="image" size="60" id="file_upload[0]" name="file_upload[0]" onChange="jsSelectedPicture(this.value);jsAddedRow();" />

und such dann nach dieser...

Code:

function jsAddedRow() {
  var elem = document.getElementById('file_upload[' + fileup + ']');
  if (typeof(elem) == 'object' && elem.value != "") {
    [...]
  }
}

[jaenicke]

Zitat von Phoenix:

Bei sowas gehe ich immer her und debugge das Javascript im Browser.
Das geht relativ gut z.B. mit dem WebDeveloper Express.

Wobei auch der integrierte Debugger meistens bereits ausreicht.

@RWarnecke:
Was ist document.PictureEntry? Wie wäre es mit einer kleinen Testseite als Anhang oder so, dann könnte dir sicher schnell jemand sagen was das Problem ist...

[RWarnecke]

Zitat von omata:

und such dann nach dieser...

Code:

function jsAddedRow() {
  var elem = document.getElementById('file_upload[' + fileup + ']');
  if (typeof(elem) == 'object' && elem.value != "") {
    [...]
  }
}

Hallo omata,

das funktioniert für den ersten Input-Tag, aber für den zweiten nicht, da ich beim zweiten die ID über setAttribute setzen muss und der IE diese nicht annimmt.

Zitat von jaenicke:

@RWarnecke:
Was ist document.PictureEntry? Wie wäre es mit einer kleinen Testseite als Anhang oder so, dann könnte dir sicher schnell jemand sagen was das Problem ist...

Hallo Sebastian,

im Anhang eine kleine Testseite. Im Input-Tag werden nur Bilddateien akzeptiert.

[RWarnecke]

Hallo zusammen, ich habe jetzt eine andere Lösung gefunden. Die Lösung basiert auf dem Vorschlag von omata mit der ID. Ich gebe jetzt fest 10 Input-Tags mit dem Type File vor und lasse diese über den Style display einblenden.

Damit kann ich zwar erstmal leben, dennoch würde ich gerne wissen, warum meine Funktion AddedRow unter Firefox und Co funktioniert und warum unterm IE nicht und gibt es Lösung für den IE für die Funktion AddedRow.

[jaenicke]

Also bei mir kann ich das nicht nachvollziehen, dass das funktioniert. Bei mir kommt da im FF und Opera genauso ein Fehler wie im IE. Was auch kein Wunder ist, da der Name eben auch das [0] am Ende enthält.

Ich schaue aber einmal nach einer Lösung.

[RWarnecke]

Hallo Sebastian,

ja, stimmt. Ich habe aus versehen die aktuellste Version meiner Versuche in den Anhang gepackt. Wenn du die Zeile 103 löscht und die Zeile 104 durch diese Zeile ersetzt, bekommst Du den Fehler :

Code:

if (document.PictureEntry.elements['file_upload[' + fileup + ']'].value != "") {

Dann wirst Du sehen, dass Du im Firefox und Co, Dateien hinzufügen und austauschen kannst aber im IE nicht. Da kommt nach dem Hinzufügen des 2.Bildes der Fehler, wie ich es im Beitrag #1 geschrieben habe.