[Ben]

Hi,
also ich habe aktuell das hier:

<script type="text/javascript">
	
function addUploadField(div_id) { 
  document.getElementById(div_id).innerHTML += '<input class="images" type="file" name="images[]" size="35" /><br />';
} 
</script>

<input type="file" name="images[]" size="35" />
<div id="upload_images"></div>
<a class="link" onClick="addUploadField('upload_images');">Weiteres Bild hochladen</a>

Klicke ich auf den Link, so wird ein neues Inputfeld hinzugefügt.
Nun würde ich gerne die Möglichkeit haben Felder auch wieder zu entfernen.

Ich habe das folgendermaßen versucht.

var count = 1;	

function addUploadField(div_id) { 
  document.getElementById(div_id).innerHTML += '<input id="' + count + '" class="images" type="file" name="images[]" size="35" />&nbsp; <a onClick="removeUploadField(\'upload_images\',' + count + ')">x</a><br />';
  count++;
}


function removeUploadField(div_id, field_id) {
  // ..
}

Also anhand der ID des Felds irgendwie zum Ziel kommen, aber ich weiß nicht, was in die Funktion removeUploadField() kommen muss.

Danke für die Hilfe.

[MrNiceGuy]

Ich vermute mal, dass folgendes in etwa funktionieren sollte:

function removeUploadField (div_id, field_id)
{
  var objectFields = document.getElementById (div_id).getElementsByTagName ('input');

  for (var i = 0;
       i < objectFields.count;
       i++)
  {
    if (objectFields[i].type == 'file'
    && objectFields[i].id == field_id)
    {
      document.getElementById (div_id).removeChild (objectFields[1]);
    }
  }
}

Ich habe es nicht getestet und ich übernehme keine Garantie, dass das in allen Browsern so läuf, wenn es denn läuft, aber der Weg, der zu gehen ist sollte klargeworden sein. Wenn es so vielleicht auch nicht klappen sollte, so musst du selber mal ein bisschen rumexperimentieren: http://de.selfhtml.org/javascript/ob...m#remove_child

[Neq']

Oder einfach ganz simpel:

function removeUploadField(div_id, field_id) {
  document.getElementById(div_id).removeChild(document.getElementById(field_id));
}

Wobei gesagt sei, dass du besser dein Input-Field und deinen Link in einen Div-Container packst, so kannst du es einfacher löschen.

var count = 1;	

function addUploadField(div_id) { 
  document.getElementById(div_id).innerHTML += '<div id="' + count + '"><input id="' + count + '" class="images" type="file" name="images[]" size="35" />&nbsp; <a href="#" onclick="removeUploadField(\'test\',' + count + ')">x</a></div>';
  count++;
}

function removeUploadField(div_id, field_id) {
  document.getElementById(div_id).removeChild(document.getElementById(field_id));
}

[Ben]

Hi,
danke für die Antworten. Ich habe es noch nicht getestet, allerdings sehe ich nun auf den ersten Blick keinen Unterschied zwischen "mit div" und "ohne div", außer dass ich mir div-Suppe aufbaue!

[Neq']

Zitat von Ben

Hi,
danke für die Antworten. Ich habe es noch nicht getestet, allerdings sehe ich nun auf den ersten Blick keinen Unterschied zwischen "mit div" und "ohne div", außer dass ich mir div-Suppe aufbaue!

Der Unterschied ist, dass dann deine Links mit dem "x" bestehen bleiben und nicht gelöscht werden. Wenn du keine div-Suppe haben möchtest, ließ dich in die DOM-Manipulation ein und erstelle direkt ein neues Input-Element mit ihren Attributen, ist sauberer.

[Ben]

Aaah, stimmt. Gut!

Ich verwende das nun so wie du es vorgeschlagen hast. Eigentlich relativ "easy", wenn man es denn mal so vor sich liegen hat.

[MrNiceGuy]

Hmm... Wenn ich so drüber nachdenke, ist es tatsächlich einfacher direkt über die passende ID das Input-Feld zu löschen, manchmal sieht man den Wald vor lauter Bäumen nicht...

[Ben]

Wobei hier ja nochmals bemerkt werden sollte, dass es in meinem Fall nicht gereicht hat das input-Feld zu löschen, da dahinter ja noch ein Link war.

Aber ich find das Ganze gerade super interessant. Werd mir die Tage mal etwas Lesestoff im Bezug auf diesem DOM-Kram da raussuchen.

[Ben]

Morje,
mir fällt gerade Folgendes auf.

Wenn ich in einem Uploadfeld bereits eine Datei ausgesucht habe und danach per JS ein weiteres Uploadfeld dazufüge ist die Dateiauswahl verschwunden.

Kann man das irgendwie umgehen? Weil das ist nicht gerade nutzerfreundlich. Da hat man 10 Felder befüllt, merkt das man noch ein 11.Bild hat, klickt auf den Link und alle Felder sind leer.

Danke!

[Ben]

Hallo,
ich denke, dass ich mein Problem gelöst habe. Zumindest läuft es gerade so, wie ich es gerne hätte.

Zitat von Neq'

ließ dich in die DOM-Manipulation ein und erstelle direkt ein neues Input-Element mit ihren Attributen, ist sauberer.

Dem Rat bin ich mal gefolgt (SelfHTML rules) und bin zu folgendem Ergebnis gekommen.

Sind meine ersten Schritte. Wenn es also noch elegantere, kürzere, bessere, ... Wege gibt, dann immer her damit.
Und wenn da irgendwas sogar "falsch" dran sollte, dann bitte ich um rasche Berichtigung. Hab ja nicht den ganzen Tag Zeit, ne?

PHP-Code:

<script type="text/javascript"><!--

// Anzahl der hinzugefuegten Uploadfelder
var count = 1;

/*
 * Funktion fuegt ein Uploadfeld inkl. "Entfernen-Link" hinzu
 */
function addUploadField(div_id) {

    //
    var uploadField = document.createElement('div');
    uploadField.setAttribute('id', 'field_' + count);
    uploadField.style.display = 'block';

    var inputForFile  = document.createElement('input');
    inputForFile.setAttribute('name', 'image' + count);
    inputForFile.setAttribute('type', 'file');
    inputForFile.setAttribute('size', '35');
    inputForFile.style.marginRight = '5px';

    var removeLink = document.createElement('a');
    removeLink.appendChild(document.createTextNode('x'));
     removeLink.setAttribute('id', 'field_' + count);
    removeLink.setAttribute('href', 'javascript:removeUploadField(\'upload_images\', \'field_' + count + '\')');
    removeLink.setAttribute('title', 'Uploadfeld entfernen');
    removeLink.className = 'link';

    uploadField.appendChild(inputForFile);
    uploadField.appendChild(removeLink);

    document.getElementById(div_id).appendChild(uploadField);
    count++;
}

/*
 * Funktion entfernt ein mittels addUploadField() hinzugefuegtes Uploadfeld
 */
function removeUploadField(div_id, field_id) {

    document.getElementById(div_id).removeChild(document.getElementById(field_id));
}

--></script> 


Ich habe nun also trotzdem pro Feld ein div-Element. Aber ich hab das irgendwie nicht anders hinbekommen. So ganz 100%ig bin ich damit nicht zufrieden, aber 95% sind es schon. Das reicht erstmal.


DENKSTE!
Na, so leicht kommt ihr mich nicht davon.

Denn Probleme gibt es immer noch, da mein toller Code nur im Firefox (2.x) läuft.

Demnach: HELP!


EDIT:
Also, ich habe oben noch etwas geändert. Der remove-Link wurde vorher per onclick ausgelöst, nun mach ich das mittels href="javascript:removeUploadField(..)".

Jetzt klappt es im FF (2.x), Opera und IE 6.

Und nachdem ich den Safari mal aktualisiert habe, klappt es nun auch dort. Yippieh.