Aggiungere un "carica immagine" ogni volta che si seleziona una immagine

Chiedo scusa per la poca chiarezza del titolo. Ho un form e vorrei fare che ogni volta che un utente selezione un'immagine da caricare, li appaia sotto un altro campo per caricare un'altra immagine. Inoltre, se possibile, vorrei che il nome di tali campi aumentasse prograssivamente. ES: "File1, File2 ecc..". Grazie a tutti.

Imposti un contatore a 1 al caricamento della pagina, e in onchange relativo al campo file, aggiungi un altro campo file, appendendo il contatore al nome del campo.

Usando jQuery il tutto è ancora più semplice.

Eh, a conoscere il jQuery. In js non è uno scherzo però... Qualche suggerimento?

Citazione:

---

Originalmente inviato da tenam

Eh, a conoscere il jQuery. In js non è uno scherzo però... Qualche suggerimento?

---

jQuery E' javascript!
E' solo una raccolta di funzioni che facilitano la scrittura.

Inizia a dare un'occhiata alla documentazione di .append()

Ok, ho fatto

Citazione:

---

<script>
var nImage = 1;
function newImage(){
nImage++;
$('.immagini').append('<tr><td>Immagine</td><td><input style="width:200px;" onChange="newImage()" type="file" name="image'+nImage+'"></td></tr>');
}
</script>

---

E poi

Citazione:

---

<div id="immagini"><tr><td>Immagine</td><td><input style="width:200px;" onChange="newImage()" type="file" name="image"></td></tr></div>

---

ma non funziona.. Inserisco un immagine, ma niente.. Il codice sembra non funzionare.

Citazione:

---

Originalmente inviato da tenam

...

ma non funziona.. Inserisco un immagine, ma niente.. Il codice sembra non funzionare.

---

Come inizio non è male.
Non funziona perchè tu vuoi appentere qualcosa ad un oggetto che ha classe pari a immagini [$('.immagini')], mentre l'azione va impostata verso un id [$('#immagini')].

Capisco che sono test ma stai attento ai tag html.
TR e TD non hanno senso fuori dal tag TABLE, e una volta inserito quest'ultimo (per cui i nodi sarebbero DIV > TABLE > TR > TD), il selettore va modificato in [$('#immagini table')] ovvero l'azione va eseguita sul tag table figlio dell'id immagini.

Per cui il tuo codice dovrebbe essere modificato circa così:

Codice PHP:

---

<script>
var nImage = 1;

function newImage(){
nImage++;
$('#immagini table').append('<tr><td>Immagine</td><td><input style="width:200px;" onChange="newImage()" type="file" name="image'+nImage+'"></td></tr>');
}
</script>


---

Codice PHP:

---

<div id="immagini">
<table>
<tr>
<td>Immagine</td>
<td><input style="width:200px;" onChange="newImage()" type="file" name="image"></td>
</tr>
</table>
</div>


---

Un'ultima cosa.
Come saprai per fare upload devi inserire anche il tag FORM con l'attributo enctype impostato a "multipart/form-data", e il method a post, quindi:

Codice PHP:

---

<div id="immagini">
<form action="upload.php" method="post" name="uploadform" enctype="multipart/form-data">
<table>
<tr>
<td>Immagine</td>
<td><input style="width:200px;" onChange="newImage()" type="file" name="image"></td>
</tr>
</table>
</form>
</div>


---

Ecco il mio codice:

Codice PHP:

---

<script>
var nImage = 1;

function newImage(){
nImage++;
$('#immagini table').append('<tr><td>Immagine</td><td><input style="width:200px;" onChange="newImage()" type="file" name="image'+nImage+'"></td></tr>');
}
</script>
<form style="width:500px; padding-left:3px;" action="" method="POST" enctype="multipart/form-data">
<table>
<input type="hidden" name="confermaInvio" />
<tr><td>Titolo</td><td><input style="width:200px;" type="text" name="nome" /></td></tr>
<tr><td>Testo Diario</td><td><textarea name="descrizione"></textarea></td></tr>
<tr><td>Area geografica</td><td>
<select style="width:200px;" name="area">
<option selected="selected" value=""></option>
<option value="Africa">Africa</option>
<option value="America centrale">America centrale</option>
<option value="America del Nord">America del Nord</option>
<option value="America del Sud">America del Sud</option>
<option value="Antartide">Antartide</option>
<option value="Asia">Asia</option>
<option value="Caraibi">Caraibi</option>
<option value="Europa">Europa</option>
<option value="Medio Oriente">Medio Oriente</option>
<option value="Oceania">Oceania</option>
</select>
</td></tr>
<tr><td>Paese</td><td><input style="width:200px;" type="text" name="nazione" /></td></tr>
<tr><td>Inizio viaggio</td><td><?=$select?></td></tr>
<tr><td>Fine viaggio</td><td><?=$select2?></td></tr>
<div id="immagini"><tr><td>Immagine</td><td><input style="width:200px;" onClick="newImage()" type="file" name="image1"></td></tr></div>
</table><br />

<div align="center">
<input id="bottone" onClick="document.getElementById('bottone').style.display = 'none'; document.getElementById('bottone2').style.display = 'inline';" type="submit" value="Inserisci">
<div style="display:none" id="bottone2">Inserimento in corso</div>
</div>
</form>

---

Sai dirmi perchè non va?

Non funziona perchè hai una nidifcazione dei tag HTML che non va bene.

Ho sostituito questo

Codice PHP:

---

<div id="immagini"><tr><td>Immagine</td><td><input style="width:200px;" onClick="newImage()" type="file" name="image1"></td></tr></div>


---

con

Codice PHP:

---

<tr>
<td colspan="2">
<div id="immagini">
<table>
<tr>
<td>Immagine</td>
<td><input style="width:200px;" onClick="newImage()" type="file" name="image1"></td>
</tr>
</table>
</div>
</td>
</tr>


---

in pratica:

1. Nuova riga della tabella (TR)
2. 2 Celle unite (colspan="2")
3. DIV
4. Nuova tabella con dentro i controlli

In generale sbagliavi a mettere il div prima della nuova riga. La posizione corretta ove posizionare il div sarebbe stata dentro il tag td. Ma il codice JS sarebbe stato un pelino più complesso.

PS. quando scrivi codice PHP, preferisci non usare la forma contratta <?= (che tra l'altro potrebbe anche non funzionare in base alla configurazione del server), tipica di ASP, usa piuttosto la forma estesa <?php echo ...

Grazie mille di cuore :D Terrò a mente i tuoi consigli :D