creazione di un input type="file" con evento onChange

[blekm]

allora, ho questo codice:

<form action="/page/upload.php" method="post" enctype="multipart/form-data">
	<input type="file" name="upfile[]" onChange="photos()">

        <input type="hidden" name="MAX_FILE_SIZE" value="100000">
	<input type="submit" value="Invia il file">
	<input type="reset" name="reset" value="Azzera dati">
</form>

nella mia funzione photos() vorrei fare in maniera tale che ogni volta che cambia il contenuto del primo

input type="file"

sotto me ne appaia un altro vuoto, identico a quello sopra.
ESEMPIO

<input type="file" name="upfile[]" onChange="photos()">


questo viene riempito, sotto me ne deve comparire un altro, da ottenere questo risultato
<input type="file" name="upfile[]" onChange="photos()">

<input type="file" name="upfile[]" onChange="photos()">


se riempio il secondo, ne servono tre
<input type="file" name="upfile[]" onChange="photos()">

<input type="file" name="upfile[]" onChange="photos()">

<input type="file" name="upfile[]" onChange="photos()">

...
...
...

e cosi via? qualcosa già pronto? un link? un aiutino?

[floyd]

function photos() {
  var input = document.createElement('input');
  input.type = 'file';
  input.name = 'upfile[]';
  input.onchange = photos;
  var br = document.createElement('br');
  var files = document.getElementById('files');
  files.appendChild(input);
  files.appendChild(br);
}

poi metti l'input in un div con id files
dovrebbe andare

[Andrea1979]

sì, manca solo l'onchange

function addField(div) {
  var field = document.createElement("input");
  field.type="file";
  field.name="upfile[]";
  field.onchange = function () {
    addField(div);
  };
  document.getElementById(div).appendChild(field);
  field = document.createElement("br");
  document.getElementById(div).appendChild(field);
}

e gli input andranno in

<div id="tuodiv">
  <input type="file" name="upfile[]" onchange="addField(this.parentNode.id);" />

</div>

[floyd]

Originariamente inviato da Andrea1979
sì, manca solo l'onchange

l'avevo messo
input.onchange = photos;

[Andrea1979]

mi mangio una merda

[blekm]

grazie floyd, funziona correttamente.

Avrei solo una domanda da farti:

inizialmente, prima e unica casella vuota, la riempio e mi appare la seconda.

Però, se io vado a rimodificare la prima casella, poi me ne appare una terza vuota.

Sicchè finisco per ritrovarmi con prima piena, seconda e terza vuota..

si può ovviare a ciò? nel senso, se ricarico una casella già piena, evitare di crearne un altra vuota (in quanto esiste già)

se non è troppo disturbo..

spero di essermi spiegato...

[floyd]

provo

function photos(source) {
  source.onchange = null;
  var input = document.createElement('input');
  input.type = 'file';
  input.name = 'upfile[]';
  input.onchange = function () {photos(input); };
  var br = document.createElement('br');
  var files = document.getElementById('files');
  files.appendChild(input);
  files.appendChild(br);
}

l'onchange dell'input deve essere photos(this)

[blekm]

MITICO!!

Grazie mille. Spero di non doverti più rompere su questo argomento...