<input files[]> weitere Dateien hinzufügen ohne alte zu löschen

[mentizm]

Hallo Forum,

ich habe nun schon einige Zeit damit verbraucht um eine gescheite Lösung zu bekommen, aber nichts gefunden.
Ausgangspunkt ist ein IMAGEUPLAODER Basis: HTML 5 / JS / PHP

Mein Formular sieht so aus:

<form id="form_imgUpload" action="xyz.php" method="post" enctype="multipart/form-data">
...
<input type="file" name="files[]" multiple>
...
</form>

Das Problem was ich habe ist:

1. Ich wähle 2 Bilder aus. Wenn ich dann via Jquery auf das $("input:file")[0].files Element zugreife bekomme ich eine FileList zurück, welche die beiden Bilder enthält.
   
2. Nun will ich gerne 2 weitere Bilder hinzufügen
   1. Drücke das input Element und wähle zwei neue Bilder aus.
   2. Nun werden die ersten beiden Bilder gelöscht.
   3. Und ich habe nur die beiden letzten ausgewählten Bilder in meiner FileList.

Wie es andere machen:
Was ich schon gefunden habe ist der Uploader von Blueimp (jQuery File Upload Demo) der natürlich Premium ist und ich frage mich wie man das hin bekommt.Man kann dort ohne Probleme diverse Files nach und nach hinzufügen. Wenn man nun den Upload startet werden alle Bilder nacheinander Hochgeladen. Für jedes Bild macht er einen eigenen AJAXcall, was an dieser Stelle vielleicht trivial ist, aber ich bin mir da mittlerweile nicht mehr so sicher.
Was merkwürdig ist:
Was bei Blueimp noch hinzukommt ist, dass wenn ich via Javascript auf sein INPUT Element zugreife um mir die FileList auszugeben, dann ist diese leer. Egal wieviele Bilder ich hinzufüge <input files[]>.length=0.
Aber wenn dann die Bilder hochgeladen werden, dann läuft ein php script, welches die Bilder aus der Globalen $_FILES holt!
Ich verstehe nicht, wie files[].length=0 sein kann aber in $_FILES die Bilddaten enthalten sind?
Was mir helfen würde:
Ich brauche eigentlich gar nicht wissen, wie es bei Blueimp funktioniert, vielleicht hat er da auch ganz viel Hirnschmalz hineingesteckt. Ich suche nur eine Denkhilfe, wie ich das Problem angehen kann. Das wäre sehr nett.
Ich habe schon Lösungen gefunden wie, einfach ein weiteres <input files[]> generieren und die weiteren Bilder dort hineinladen, aber das scheint mir eine sehr merkwürdige Methode zu sein, zumal das bei mehreren Hinzufügen außer Kontrolle geraten kann befürchte ich.

Danke im Voraus für die Hilfe, Gruß Chris.

 

[threadi]

Der Grund wieso es bei diesem Script dort funktioniert ist eigentlich simpel. Sobald eine Datei eingefügt wird, wird das Element im HTML-Code an eine andere, nicht sichtbare Stelle verschoben und ein neues input-file anstelle des gerade verschobenen eingefügt. Im Firebug kann man das prima sehen.

Ich habe so etwas auch mal selbst gebaut. Läuft eigentlich genau wie ich gerade geschrieben hatte. Wenn eine Datei eingefügt wird, wird das Element verschoben und ein neues eingefügt. Allerdings muss man beim Verschieben höllisch aufpassen. cloneNode() kann man hierfür leider nicht wirklich verwenden. Am einfachsten ist es eigentlich wenn man die Felder, welche eine Datei enthalten per CSS aus dem Blickfeld schiebt.

Moderation: Verschoben von HTML zu JavaScript.

 

[mentizm]

Hi threadi,

danke für die Antwort. Aber vielleicht kannst du mich noch etwas genauer aufklären. Wie erkennst du im FB, dass er das input Element verschiebt und ein neues einsetzt und wohin verschiebt er es?

Ich suche den ganzen HTML Code ab und kann die versteckten input Elemente einfach nicht finden. Ist es denn wirklich möglich Elemente so zu verstecken, dass sie selbst nicht im HTML Code angezeigt werden und sie komplett unsichtbar sind?

Kommt mir irgendwie gerade vor wie Zauberei, aber das nur weil ich das noch nie gemacht habe.

Edit:
Hab mir seine ganzen JS Files mal angeguckt und da tatsächlich die Stelle gefunden in der er die input Elemente sichert. Ich Poste mal die Funktion für diejenigen die auf das selbe Problem stoßen und auch ein wenig in BLUEIMPs Code rumschnüffeln.

 

[mentizm]

_replaceFileInput: function (input) {  var inputClone = input.clone(true);
  $('<form></form>').append(inputClone)[0].reset();
  // Detaching allows to insert the fileInput on another form
  // without loosing the file input value:
  input.after(inputClone).detach();
  // Avoid memory leaks with the detached file input:
  $.cleanData(input.unbind('remove'));
  // Replace the original file input element in the fileInput
  // elements set with the clone, which has been copied including
  // event handlers:
  this.options.fileInput = this.options.fileInput.map(function (i, el) {
  if (el === input[0]) {
    return inputClone[0];
  }
  return el;
  });
  // If the widget has been initialized on the file input itself,
  // override this.element with the file input clone:
  if (input[0] === this.element[0]) {
    this.element = inputClone;
  }
}

 

[threadi]

Genau, da wird scheinbar etwas geklont. jQuery kann das offenbar für jeden Browser korrekt verarbeiten.

Im Firebug kann man so etwas im HTML-Modus erkennen wenn man den aktiviert hat und eine Datei hochladen lässt - dann werden die Zeilen die in dem Moment über JavaScript verändert werden gelb markiert. Und das ist eben dieses input-Element.

 

[Desperant]

Hi,
gibt es inzwischen ein Lösung für dieses Problem. Ich habe nichts im Web gefunden.
Bitte um eine Antwort.
Grüße

 

[threadi]

Die Lösung steht doch oben? Mit jQuery dürfte das mittlerweile noch einfacher geworden sein.

 

[Desperant]

ich habe es leider nicht verstanden, wie ich die Lösung von oben richtig anwende. Danke für den Tip!

 

[threadi]

Wenn Du das Beispiel oben nicht verstehst, kannst Du dir auch viele andere im Netz noch anschauen. Hier eine Auswahl:
https://blueimp.github.io/jQuery-File-Upload/
http://jquery-plugins.net/tag/multiple-file-upload
http://hayageek.com/jquery-multiple-file-upload/

Wenn Du weiterhin Probleme hast stell konkrete Fragen damit man dir auch helfen kann.

 

[Desperant]

Hi,
ich habe eine produktive Seite, die ich ungern umbauen möchte. Meine Konkrete Frage, was ich mit dem Codeschnippsel von Oben "_replaceFileInput:..." machen soll.
Ich habe versucht diesen Beispiel umzusezten, aber beim auslesen in PHP (ich verschicke die Bilder, als Anhang) besteht der Pool nur aus den Dateien, die zuletzt ausgewählt habe. Es wäre einfach so toll, wenn ich meine bestehende Lösung nutzen kann und nur etwas erweitere, sodass mehrfach Auswahl hintereinander möglich wäre, ohne die Daten zu verlieren.
Dankee

 

[threadi]

In deiner Vorlage wird ein input-file mit multiple-Attribut verwendet. Solange ein Browser das unterstützt, kann man in einem Rutsch mehrere Dateien auswählen und hochladen. Wenn Du Dateien nacheinander auswählen lassen willst, lass das multiple-Attribut weg.

 

[Desperant]

Wenn ich nach dem Absenden auslese, habe ich nur eine Datei im Speicher:
$fdata = $_FILES["files"]

 

[threadi]

Dann musst Du aus dem name-Attribut ein Array machen ..

 .. name="files[]" ..