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

coronel · 26 Novembre 2021

Dany© ha detto:
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

Scusa ho controllato varie volte il codice e non ho trovato elementi plain js in cui uso jq, potresti indicarmeli x favore? E poi quali sarebbero questi gravi errori di logica?

Messaggio unito automaticamente: 27 Novembre 2021

Ciao dany buongiorno, scusami sto ricontrollando adesso il codice ma non ho ancora individuato l errore, ho fatto come mi hai detto cioe usare jquery anche se qualche elemento e rimasto in vjs cioe solo quelli che creano nuovi elementi

Messaggio unito automaticamente: 27 Novembre 2021

neanche usando il metodo eq x li elementi array jq va

JavaScript:

$(document).ready(function(){
    
    $(".menu").siblings().hide();
    $("#submit").show();

    //$("input[type='submit']").show();
    //$("input[type='file']").show();
    $("#gallery").show();
    //$('.menu, .submenu, .scarpe').val('select');

    $(".menu, .submenu1, .submenu2, .misure_magliette").on("change", function(){
        val = $(this).val();
        console.log(val);
        $("."+val).show();
    
    
        console.log($(this).attr("class"));
        if($(this).attr("class") == "menu"){
        
            $("."+val).show();

            $("."+val).siblings().hide();
            $("#submit").show();
            $(".menu").show();
            console.log("ok")


        }

        if($(this).attr("class") == "submenu1" || $(this).attr("class") == "submenu2"){
            $("#gallery").show();

        }


        //    $("."+val).val('select');
        //    $("."+val).siblings().hide();

    });


    $("input[type='number']").mouseout(function(){
        console.log($(this).val());
    })

    $("input[type='submit']").mouseover(function(){

    })


    //var fileInput = document.getElementById('file_input');
    //fileInput = $(".file_input");
    cont =0;
    rotate = 0;


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


        div = document.createElement("div");

        for(let file of $(".file_input").eq(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").eq(cont).click();
    })


    /*
    imageElement2.addEventListener("click", ()=>{



    })
    */
})

Uncaught TypeError: $(...).eq(...).files is undefined
<anonymous> http://localhost/main.js:65
jQuery 8
<anonymous> http://localhost/main.js:58
jQuery 13
main.js:65:42

Dany© · 29 Novembre 2021

Dany© ha detto:
...
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.
...
Quando riformulerai una logica che sia leggibile sarò felice di darti una mano come nelle precedenti risposte, così è solo controproducente per te.

Ciao,

Ti rinnovo l'invito a riscrivere la logica da capo, facendo tesoro dei consigli nelle risposte al topic.

Per come è scritto adesso il codice si fa più fatica a leggerlo e capire i problemi che riscriverlo da 0 – dato che (spero) sei interessato ad imparare qualcosa – sarebbe assolutamente controproducente scriverti la soluzione ai problemi fornendoti la pappa pronta e, al contrario, assolutamente ORO che tu sbatta la testa sul problema e provi a risolverlo ripartendo da capo.

Ti consiglio inoltre nuovamente di leggere la documentazione di jQuery, hai ancora dubbi sulla differenza tra elementi jq e plain, è abbastanza grave nell'ottica del fatto che vuoi utilizzare la libreria.

coronel · 29 Novembre 2021

Dany© ha detto:
Ciao,

Ti rinnovo l'invito a riscrivere la logica da capo, facendo tesoro dei consigli nelle risposte al topic.

Per come è scritto adesso il codice si fa più fatica a leggerlo e capire i problemi che riscriverlo da 0 – dato che (spero) sei interessato ad imparare qualcosa – sarebbe assolutamente controproducente scriverti la soluzione ai problemi fornendoti la pappa pronta e, al contrario, assolutamente ORO che tu sbatta la testa sul problema e provi a risolverlo ripartendo da capo.

Ti consiglio inoltre nuovamente di leggere la documentazione di jQuery, hai ancora dubbi sulla differenza tra elementi jq e plain, è abbastanza grave nell'ottica del fatto che vuoi utilizzare la libreria.

ho usato il metodo eq di query , ma neanche cosi funziona, -- scusa ma x poi che ci provo non riesco a identificare il problema

Dany© · 29 Novembre 2021

Ciao;

stai provando ad andare da Milano a Roma passando per la Grecia, ti stai complicando la vita usando delle funzioni che non servono (e una logica sbagliata).

JavaScript:

$(".file_input").eq(cont).on("change", () => {
    div = document.createElement("div");
    for(let file of $(".file_input").eq(cont).files) {
        ...

Perchè stai facendo questa cosa? Non ha senso, stai usando un contatore per assegnare dei listener a degli elementi quando puoi usare un ciclo normalissimo e usare poi la referenza di ogni elemento per tirare fuori i file presenti.

E potrei indicarti anche altre cose che non hanno senso.

Fai uno wipe completo del codice, riscrivilo da capo e io ti aiuterò a capire e risolvere eventuali (nuovi) problemi.

JavaScript:

        //    $("."+val).val('select');
        //    $("."+val).siblings().hide();

    });


    $("input[type='number']").mouseout(function(){
        console.log($(this).val());
    })

    $("input[type='submit']").mouseover(function(){

    })


    //var fileInput = document.getElementById('file_input');
    //fileInput = $(".file_input");

Capisci che per chi ti aiuta leggere 100 righe di codice in cui ci sono cose del genere è veramente difficile oltre che controproducente per te stesso?

coronel · 30 Novembre 2021

Broo la documentazione a cui mi apogio io e quella di w3school xke mi e piu facile da capire e anche xke ce il edjtore incluso x provare i codici.. le altre guide quali html.it e simili nn li capjsco tanto bene e figuriati la guida ufficiale di jquery scritta in inglese... Tu mi hai detto di usare jquery e io l sto usando, nn capisco dove sta il problema

Dany© · 30 Novembre 2021

Ciao;

Stai rifiutando l'aiuto migliore che ti possa essere fornito non leggendo ciò che scrivo e ciò mi dispiace molto.

Comunque a questo punto penso che ti interessi esclusivamente avere la soluzione invece di comprendere quello con cui stai lavorando ed avere di conseguenza la possibilità di riutilizzare le eventuali conoscenze apprese in un futuro.

Ecco la soluzione riscritta da 0 perché la tua precedente era incomprensibile, di ciò che immagino tu voglia fare, puoi riadattarla aggiungendo tutto ciò che ti serve.

Vedi: https://jsfiddle.net/DanieleFI/pL9xyo3d/100/

Ti chiedo, quantomeno, di provare a seguire il modo in cui sono scritte le cose e continuare sulla stessa riga in modo da avere un codice PULITO e ordinato.

coronel · 1 Dicembre 2021

Dany© ha detto:
Ciao;

stai provando ad andare da Milano a Roma passando per la Grecia, ti stai complicando la vita usando delle funzioni che non servono (e una logica sbagliata).

JavaScript:

$(".file_input").eq(cont).on("change", () => { div = document.createElement("div"); for(let file of $(".file_input").eq(cont).files) { ...

Perchè stai facendo questa cosa? Non ha senso, stai usando un contatore per assegnare dei listener a degli elementi quando puoi usare un ciclo normalissimo e usare poi la referenza di ogni elemento per tirare fuori i file presenti.

E potrei indicarti anche altre cose che non hanno senso.

Fai uno wipe completo del codice, riscrivilo da capo e io ti aiuterò a capire e risolvere eventuali (nuovi) problemi.

JavaScript:

// $("."+val).val('select'); // $("."+val).siblings().hide(); }); $("input[type='number']").mouseout(function(){ console.log($(this).val()); }) $("input[type='submit']").mouseover(function(){ }) //var fileInput = document.getElementById('file_input'); //fileInput = $(".file_input");

Capisci che per chi ti aiuta leggere 100 righe di codice in cui ci sono cose del genere è veramente difficile oltre che controproducente per te stesso?

Scusa l.ignoranza, che vuol dire wipe? Cmq assegno un listener agli elementi usando un contatore perche logicamente il primo elemento rimane in ascolto e una volta che viene attivato la var cont sale e quindi il prossimo elemento rimane in ascolto e cosi via, nn capisco che ce che nn va in questa logica

Messaggio unito automaticamente: 1 Dicembre 2021

Scusami comunque non ho ancora capito perche mi la consola mi segnala questo errore:
Uncaught typeerror $(...).eq(...).files is undefined

Messaggio unito automaticamente: 1 Dicembre 2021

cioe fare cosi

JavaScript:

cont = 0;
    $(".file_input").eq(cont).on("change", () => {

   //cont++;
        //rotate -= 90;

        div = document.createElement("div");
        for(let file of $(".file_input").eq(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++

e come fare

JavaScript:

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

        div = document.createElement("div");
        for(let file of $(".file_input").eq(0).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++

Messaggio unito automaticamente: 1 Dicembre 2021

Cmq scusa se suono confuso, preparero una spiegazione migliore

Dany© · 1 Dicembre 2021

Wipe vuol dire pulire.

Perché vuoi usare un contatore in quel modo quando puoi benissimo usare un ciclo? E poi, dato che il contatore viene aumentato nell'evento, i nuovi listener verranno registrati solo se i precedenti sono stati triggerati (qui l'errore logico grave).

Evidentemente $(...).eq(...) non è un oggetto che ha la proprietà files, questo è quello che la console ti sta indicando.

Comunque sono confuso, ti ho postato una soluzione con un codice riscritto da 0, funzionante e pulito e mi chiedi di nuovo cose sul vecchio codice, ancora confusionario e con gli stessi errori logici di prima? Mi sono perso qualcosa?

Sinceramente non so più come aiutarti, non sto capendo più neanche io quali siano le domande :asd:

coronel · 1 Dicembre 2021

Dany© ha detto:
Wipe vuol dire pulire.

Perché vuoi usare un contatore in quel modo quando puoi benissimo usare un ciclo? E poi, dato che il contatore viene aumentato nell'evento, i nuovi listener verranno registrati solo se i precedenti sono stati triggerati (qui l'errore logico grave).

Evidentemente $(...).eq(...) non è un oggetto che ha la proprietà files, questo è quello che la console ti sta indicando.

Comunque sono confuso, ti ho postato una soluzione con un codice riscritto da 0, funzionante e pulito e mi chiedi di nuovo cose sul vecchio codice, ancora confusionario e con gli stessi errori logici di prima? Mi sono perso qualcosa?

Sinceramente non so più come aiutarti, non sto capendo più neanche io quali siano le domande

Ecco ^_^ a quanto pare il problema era quello, il metodo files del elemento input che funziona solo con vjs... Cmq visto che vogliamo jquerizzare tutto, mi chiedevo se con jquery si potessero creare nuovi elementi nel dom

Dany© · 2 Dicembre 2021

Ciao;
c'è il modo di farlo: scrivi la stringa che rappresenta l'elemento e la appendi all'eventuale container.
Qui la documentazione di esempio.

coronel · 2 Dicembre 2021

ei sono riuscito a farlo funzionare ma non del tutto, cioe riesco solo a caricare 1 foto e a vedere l anteprima di questa foto, e se poi premo la imagine incaricata di caricare le foto, non va piu, non vedo nuove foto e non vedo manco errori nella console

Vedi: https://jsfiddle.net/txum2wq1/

Dany© · 2 Dicembre 2021

JavaScript:

fileInput[cont].addEventListener("change", ()=>{

scusa ma hai letto quello che ho scritto nelle risposte precedenti? :lol:

coronel · 2 Dicembre 2021

Dany© ha detto:
JavaScript:

fileInput[cont].addEventListener("change", ()=>{

scusa ma hai letto quello che ho scritto nelle risposte precedenti?

Si lo letto ma nn ci ho capito tanto, cmq vedi che ho impostato il listenee e la chiamata al metodo files con vjs,.. la prima volta che uso il bottoe x caricare la foto funziona, ma le altre no, e non capisco

Dany© · 2 Dicembre 2021

Dany© ha detto:
Perché vuoi usare un contatore in quel modo quando puoi benissimo usare un ciclo? E poi, dato che il contatore viene aumentato nell'evento, i nuovi listener verranno registrati solo se i precedenti sono stati triggerati (qui l'errore logico grave).

Non ha senso quello che stai facendo. Guarda la soluzione che ti ho proposto, perfettamente funzionante, e prendi spunto...

coronel · 2 Dicembre 2021

Dany© ha detto:
Non ha senso quello che stai facendo. Guarda la soluzione che ti ho proposto, perfettamente funzionante, e prendi spunto...

Si so che funziona, ma piu che altro vorrei capire perché il mio codice non funziona

Dany© · 2 Dicembre 2021

Non funziona perché non ha senso quello che stai cercando di fare, non so più come spiegartelo.

Hai un contatore settato a 0 che va ad applicare l'event listener all'oggetto dell'array in posizione counter (quindi iniziale = 0).

Quindi, per il primo elemento il listener funzionerà sempre mentre per gli altri no, visto che non vengono assegnati altri eventi.

coronel · 2 Dicembre 2021

Dany© ha detto:
Non funziona perché non ha senso quello che stai cercando di fare, non so più come spiegartelo.

Hai un contatore settato a 0 che va ad applicare l'event listener all'oggetto dell'array in posizione counter (quindi iniziale = 0).

Quindi, per il primo elemento il listener funzionerà sempre mentre per gli altri no, visto che non vengono assegnati altri eventi.

Scusami guarda, io ho impostato il listener al primo input file usando il contatore e al primo funziona okay, ma poi come vedi il contatore cresci di uno alla fine del change, e quindi dopo finito di usare il primo listener in automatico dovrebbe attivarsi il listener del secondo elemento input file visto che il contatore da 0 diventa 1.

Dany© · 2 Dicembre 2021

Non funziona così, sarebbe una magia se ti funzionasse: il listener non viene assegnato automaticamente solo perché il contatore aumenta.
Stai facendo un errore logico abbastanza grave.
Tu stai assegnando un listener ad UN elemento (il primo), poi quando viene triggerato l'evento il contatore aumenta ma tu non stai assegnando alcun listener nuovo.
Per far sì che funzioni potresti wrappare l'assegnazione dei listener sugli elementi in una funzione che viene chiamata ogni volta che aggiungi un'immagine.
Comunque ti ripeto, guarda il codice che ho scritto per renderti conto di come fare :lol:

coronel · 2 Dicembre 2021

Dany© ha detto:
Non funziona così, sarebbe una magia se ti funzionasse: il listener non viene assegnato automaticamente solo perché il contatore aumenta.
Stai facendo un errore logico abbastanza grave.
Tu stai assegnando un listener ad UN elemento (il primo), poi quando viene triggerato l'evento il contatore aumenta ma tu non stai assegnando alcun listener nuovo.
Per far sì che funzioni potresti wrappare l'assegnazione dei listener sugli elementi in una funzione che viene chiamata ogni volta che aggiungi un'immagine.
Comunque ti ripeto, guarda il codice che ho scritto per renderti conto di come fare

infatti avevi ragione, condivido la soluzione qua, ora nn resta che poter inviare tutti queste immagine al server, e finora non ho mai fatto una cosa del genere, cioe prima con ajax inviavo solo dati testo, ora non saprei, secondo te conviene farlo con ajax e jq o usare vjs?

Vedi: https://jsfiddle.net/ju2730dq/

Dany© · 3 Dicembre 2021

Continuo a non condividere questa soluzione perché è molto confusionaria e alcune cose potrebbero esser fatte in maniera più efficiente e logicamente corretta, però se per te va bene e funziona allora non ci sono problemi.

Il come mandare i file al server dipende anche dal backend ricevente, come ti ho già detto.

Puoi usare la Fetch API plain JS oppure jQuery, sta a te decidere - quanto l'invio dei file non cambia niente, devi solamente usare il Content-Type corretto.

coronel · 3 Dicembre 2021

we ho trovato questo esempio di fetch ma non saprei come adattarlo al mio codice

JavaScript:

fetch("https://www.html.it/api/articoli", {
    method: "post",
    headers: new Headers({
       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8
    }),
    body: new FormData(document.getElementById("titolo"), document.getElementById("autore"))
 }).then(...).catch(...)

Dany© · 3 Dicembre 2021

Guarda la documentazione ufficiale: Using Fetch
Spiegano per filo e per segno come usarlo e nel dettaglio cosa fa ogni riga che scrivi!

coronel · 3 Dicembre 2021

Dany© ha detto:
Guarda la documentazione ufficiale: Using Fetch
Spiegano per filo e per segno come usarlo e nel dettaglio cosa fa ogni riga che scrivi!

Scusami ma la documentazione di mozzila nn l ho mai capita bene

Dany© · 3 Dicembre 2021

Quello che ti direi io è esattamente quello che c'è sulla documentazione ufficiale... è spiegato in modo semplice e conciso $:\$
La cosa che puoi fare è provare e vedere con l'esperienza cosa succede, il modo migliore per imparare queste cose è provare, provare e riprovare.

coronel · 6 Dicembre 2021

sono riuscito ad andare avanti e recuperare quasi tutti del form, mancano solo le foto, ho cercato su yt e su google ma non ho trovato nulla di chiaro, nn so come fare a inviare le foto al server

Vedi: https://jsfiddle.net/ju2730dq/1/

Cerca

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

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

Dany©

coronel

DISCUSSIONI SIMILI