Javascript come vedere in anteprima le foto caricate nel input file prima di mandarle al server

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
Il discorso è che gli input non c'entrano niente con la logica del server, o meglio non c'entrano niente a livello di interfaccia pura.
Puoi avere una singola input multipla, caricare tutte le immagini insieme e submittare il form con una FileList popolata da N elementi.
Altrimenti puoi avere N input singole e submittare il form con N FileList di un elemento.
La risposta generica ma corretta in questo caso è: dipende.
Il frontend viene (solitamente) sviluppato in base alla logica che c'è sul server - è difficile per me risponderti se non so cosa succede quando la request viene submittata, qual'è la logica che c'è dall'altra parte?

Io ti consiglio vivamente di dare almeno un'occhiata (è la risorsa con le spiegazioni più terra terra che ho trovato) a questo in modo da capire bene cosa intendiamo quando ci riferiamo all'interfaccia e cosa intendiamo quando ci riferiamo al server.

Il consiglio che ti ripeto e che rimane il punto fermo è quello di metterti con la testa su una documentazione a studiartela per bene: vuoi usare PHP (ugh)? Impara bene come funziona e vedrai che ti chiarirai molti dubbi! :)
 

coronello

Utente Gold
28 Agosto 2017
437
106
31
244
allora recapitolando se imposto 1 input file con attributo multiple per caricare varie immagini e averle tutte in 1 solo filelist dovro caricarle tutte insieme la prima volta, perche se e vero che se riesco a caricare 1 alla volta e ad avere tutte le anteprime di tutte le foto facendo cosi nel mio filelist avro solo 1 elemento, l'ultima foto che ho caricata e questo non vabene.

quindi se voglio caricare varie foto 1 alla volta, avere 1 anteprima di tutte quante e averle tutte im 1 filelist non potro farlo. quindi dovro crearmi tanti input singola, e avro tanti filelist e ok fino qui ok, impostero un limite di 5 foto faro 5 inpiut file singole e poi provero ad inviarlo al server con ajax
 

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
quindi se voglio caricare varie foto 1 alla volta, avere 1 anteprima di tutte quante e averle tutte im 1 filelist non potro farlo. quindi dovro crearmi tanti input singola, e avro tanti filelist e ok fino qui ok, impostero un limite di 5 foto faro 5 inpiut file singole e poi provero ad inviarlo al server con ajax
Rimanendo su interfacce native, senza fare alcuna ricerca e conseguente modifica/adattamento delle strutture, probabilmente sì.
 
Banner pubblicitario per Bright Data su Inforge.net azienda di vendita Proxy, Data Collector e Content Unlocker
Aquarifoundation.com: Investi in un oceano pulito

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
Considerando che il problema che hai è perpetuamente quello delle risposte precedenti ti indicherò come debuggare e arrivare alla soluzione, perché altrimenti non imparerai niente.

L'errore che viene ritornato dice:
Codice:
$(...)[cont</a>.on is not a function
E' tendenzialmente formattato male ma puoi trarre la conclusione che la funzione "on" non è riconosciuta come funzione dell'elemento su cui viene chiamata (ti aiuto, $(".file_input")).

Già da questo potresti capire come risolvere, ma se così non fosse ti do un altro hint.

Gli EventListener vengono registrati su elementi singoli del DOM, il selettore per classe di jQuery ti ritorna un array di elementi con quella specifica classe.

Da qui dovresti essere in grado di risolvere il problema :)
 

coronello

Utente Gold
28 Agosto 2017
437
106
31
244
Considerando che il problema che hai è perpetuamente quello delle risposte precedenti ti indicherò come debuggare e arrivare alla soluzione, perché altrimenti non imparerai niente.

L'errore che viene ritornato dice:
Codice:
$(...)[cont</a>.on is not a function
E' tendenzialmente formattato male ma puoi trarre la conclusione che la funzione "on" non è riconosciuta come funzione dell'elemento su cui viene chiamata (ti aiuto, $(".file_input")).

Già da questo potresti capire come risolvere, ma se così non fosse ti do un altro hint.

Gli EventListener vengono registrati su elementi singoli del DOM, il selettore per classe di jQuery ti ritorna un array di elementi con quella specifica classe.

Da qui dovresti essere in grado di risolvere il problema :)
lo so che mi ritorna un array appunto x questo il valore dalla var cont cambia a ogni click e aumenta di 1 cosi faccio riferimento alla input seguente
 
Aquarifoundation.com: Investi in un oceano pulito
DOWNLOAD

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
Hai provato a console loggare l'elemento su cui stai cercando di usare la funzione on? Sicuro che si possare usare su quell'elemento?
Hai provato le alternative? (ndr. addEventListener)
 

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
Vorrei che tu imparassi come debuggare/risolvere queste problematiche, come ti ho detto il problema alla base sta rimanendo.
Quando usi delle librerie, devi utilizzarle di conseguenza - se usi una funzione di una libreria devi anche assicurarti che essa sia utilizzata su un elemento effettivamente riconosciuto.

Aggiungi un console log di questo:
JavaScript:
$(".file_input")[0]
Ti renderai conto che non è un elemento jQuery.
 
DOWNLOAD
Supporta Inforge con una donazione

coronello

Utente Gold
28 Agosto 2017
437
106
31
244
Ultima modifica:
Vorrei che tu imparassi come debuggare/risolvere queste problematiche, come ti ho detto il problema alla base sta rimanendo.
Quando usi delle librerie, devi utilizzarle di conseguenza - se usi una funzione di una libreria devi anche assicurarti che essa sia utilizzata su un elemento effettivamente riconosciuto.

Aggiungi un console log di questo:
JavaScript:
$(".file_input")[0]
Ti renderai conto che non è un elemento jQuery.
scusa non ho capito, se riesco ad accedere con $ perche non sarebbe un elemento jquery?
Messaggio unito automaticamente:

ho capito adesso che stavo usando selettore jquery su una variabile in cui facevo selezione di un altro elemento senza jquery, cmq ora non riesco a vedere le foto in anteprima

Vedi: https://jsfiddle.net/tuhe273a/2/

Messaggio unito automaticamente:

ho provato a fare una leggera modifica e ancora nn va

Vedi: https://jsfiddle.net/tuhe273a/3/
 

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
JavaScript:
fileInput[cont].addEventListener("change", () => {
  cont++
  //rotate -= 90;
  div = document.createElement("div");

  for (let file of fileInput.files)
...

Dovresti vedere l'errore in un batter d'occhio solo da queste righe.

Comunque il codice è estremamente confuso, per poterti aiutare come si deve devi pulirlo o diventa impossibile.
Ci sono un sacco di cose inutilizzate o eventi che non fanno niente.
 
  • Mi piace
Reactions: coronello

coronello

Utente Gold
28 Agosto 2017
437
106
31
244
Ultima modifica:
JavaScript:
fileInput[cont].addEventListener("change", () => {
  cont++
  //rotate -= 90;
  div = document.createElement("div");

  for (let file of fileInput.files)
...

Dovresti vedere l'errore in un batter d'occhio solo da queste righe.

Comunque il codice è estremamente confuso, per poterti aiutare come si deve devi pulirlo o diventa impossibile.
Ci sono un sacco di cose inutilizzate o eventi che non fanno niente.
ok mi sono accorto che nel for mancava indicare l'indice ma cmq ancora nulla non vedo le anteprime


Vedi: https://jsfiddle.net/tuhe273a/4/

Messaggio unito automaticamente:

ho un problema in locale, inanzitutto voglio farlo in locale perche mi risulta piu comodo muovermi nella console di quella di jsfiddle, cmq tutti i files stanno nella stessa cartella main.js index.html output2.php
index
main.js

Schermata da 2021-11-25 18-52-40.png
 
DOWNLOAD
Aquarifoundation.com: Investi in un oceano pulito

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
Ciao,
ho provato a guardare e mi dispiace ma non riesco neanche a leggere il codice che hai scritto, o comunque ci metterei molto più tempo a capirlo che a riscriverlo, è molto confusionario e ci sono delle cose che sono logicamente (e purtroppo in modo importante) sbagliate.

Ti consiglio vivamente di, con i consigli delle precedenti risposte, provare a riscrivere da 0 tutta la logica tenendo un filo unico con le librerie che usi (se usi jQuery, usalo bene e ovunque - altrimenti rimani su VJS).

Inoltre, ti prego, cerca di essere ordinato - se dovessi mai lavorare su un progetto grande la mantenibilità è forse una delle cose più importanti, se la code base è illeggibile è impossibile mantenere il progetto.

Se ti riferisci al log nella console, è letteralmente lo stesso problema di qualche risposta fa che si ripresenta, stai cercando di usare una funzione jQuery su un elemento VJS.

Quando riformulerai una logica che sia leggibile sarò felice di darti una mano come nelle precedenti risposte, così è solo controproducente per te.
 

coronello

Utente Gold
28 Agosto 2017
437
106
31
244
Ciao,
ho provato a guardare e mi dispiace ma non riesco neanche a leggere il codice che hai scritto, o comunque ci metterei molto più tempo a capirlo che a riscriverlo, è molto confusionario e ci sono delle cose che sono logicamente (e purtroppo in modo importante) sbagliate.

Ti consiglio vivamente di, con i consigli delle precedenti risposte, provare a riscrivere da 0 tutta la logica tenendo un filo unico con le librerie che usi (se usi jQuery, usalo bene e ovunque - altrimenti rimani su VJS).

Inoltre, ti prego, cerca di essere ordinato - se dovessi mai lavorare su un progetto grande la mantenibilità è forse una delle cose più importanti, se la code base è illeggibile è impossibile mantenere il progetto.

Se ti riferisci al log nella console, è letteralmente lo stesso problema di qualche risposta fa che si ripresenta, stai cercando di usare una funzione jQuery su un elemento VJS.

Quando riformulerai una logica che sia leggibile sarò felice di darti una mano come nelle precedenti risposte, così è solo controproducente per te.
ho provato a corregere li errori ma ancora la console mi segnala errori
JavaScript:
cont =0;
rotate = 0;


$(".file_input")[cont].on("change", () => {
//cont++;
//rotate -= 90;


    div = document.createElement("div");

    for(let file of $(".fileInput")[cont].files) {
        var image = file
        if (image) {
            var imageElement = new Image();
            imageElement.src = URL.createObjectURL(image);
            imageElement.width = 100;
        

            var imageElement2 = new Image();
            imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";

            //imageElement2.width = 100;

            var imageElement3 = new Image();
            imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";
      
            var imageElement4 = new Image();
            imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";

            document.getElementById('gallery').appendChild(div);
            div.appendChild(imageElement2);

            div.appendChild(imageElement3);
            div.appendChild(imageElement4);
            div.appendChild(imageElement);

            $(imageElement2).click(function(){
                rotate = rotate - 90;
                //    rrotate = rotate + 90;


                console.log(7)
                $(imageElement).css("transform", "rotate("+rotate+"deg)");
                // $(imageElement).css("transform", "rotate("+lrotate+"deg)");

            });

            $(imageElement3).click(function(){
                // lrotate = rotate - 90;
                rotate = rotate + 90;


                console.log(7)
                // $(imageElement).css("transform", "rotate("+lrotate+"deg)");
                $(imageElement).css("transform", "rotate("+rotate+"deg)");

            });

            $(imageElement4).click(()=>{
                $(imageElement).css("display","none");
            })


        }
    }
    $("img").click(function(){
        console.log(4);
    })
  cont++
});


//cont=0;
$("#addimg").click(()=>{
  //  cont++
    $(".file_input")[cont].click();
})

Uncaught TypeError: $(...)[cont].on is not a function
<anonymous> http://localhost/main.js:56
jQuery 13
 

Dany©

Helper
8 Ottobre 2010
1,136
24
254
341
hai letto i consigli del messaggio precedente? ci sono errori di logica gravi e come ti ho detto continui ad utilizzare funzioni jQ su elementi plain js
 
Banner pubblicitario per Bright Data su Inforge.net azienda di vendita Proxy, Data Collector e Content Unlocker
DOWNLOAD