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

[DidyMond]

ook, non mifa vede piu l'errore di sinstassi ma cmq l imagine resta ferma

Sinceramente....Ma fai attenzione alle risposte che ti vengono date?
La vedi la differenza tra:

`rotate(${rotation}deg)`

e il tuo:

"rotate("+toString(rotate)+"deg)"

Al di la di nominare la variabile rotation che quello è poca roba, ma le due sintassi sono diverse...
Va bene chiedere aiuto in un forum e tanto di cappello a @Dany© che ti sta aiutando in tutto...Ma vedi di fare attenzione a quello che ti viene scritto.

Ps: tra l'altro se al tuo codice togli la funzione toString funziona anche il tuo.

 

[Dany©]

Template Literals FYI

`rotate(${rotation}deg)`

Questo è già una stringa, non hai bisogno di castarlo

Inoltre, il cast in String (in JS) ha la seguente sintassi:

let pippo = ...
pippo.toString()

 

[DidyMond]

ho provato ad attivare l'altro bottone quello x girare in senso orario, ma gira male aha, guarda

Ma se la rotazione in un senso funzionava.... Perchè ti devi reinventare l'acqua calda per farlo andare nell'altro senso?
A che pro fare due variabili lrotate e rrotate ?
Il problema è analogo ai punti precedenti, in particolare la risposta ti è già stata data: https://www.inforge.net/forum/threads/come-vedere-in-anteprima-le-foto-caricate-nel-input-file-prima-di-mandarle-al-server.607203/post-5194036

La cosa più ovvia non era copiare quello che fai per imageElement2 e sostituire semplicemente -90 con +90?

 

[coronel]

Ciao,
per il caricamento effettivo delle foto hai bisogno di tirarti su il server, dipende dalle tecnologie che vuoi usare ma non è proprio una cosa che si impara in due risposte qui su inforge, dovresti scegliere uno stack tecnologico da usare e studiarti la documentazione.
Ora come ora quello che hai fatto è sviluppare l'interfaccia del tuo progetto.
Tra l'altro, giusto a scopo informativo, la rotazione che hai implementato è solo visiva: se caricassi le foto esse manterrebbero esattamente il formato iniziale.

Onestamente non ho guardato il css, può darsi che su JSFiddle venisse shrinkata la finestra e di conseguenza gli elementi shiftassero direttamente sotto le input, ti consiglio di guardarti come funzionano le Flexbox per imparare a gestire il flow degli elementi.

grazie dani di tutto vermaente, se hai bisogno di aiuto nei tuoi progetti chiedimi pure, io x adesso mi fermo qui, ,, ho gia avuto a che fare con felxbos tempo fa, e non ce ho capito na maza haha

Messaggio unito automaticamente: 21 Novembre 2021

cmq ieri mi sono scordato di ringraziare anche didymond, e anche l offerta di aiuto x i progetti

 

[JunkCoder]

Ammiro la pazienza di @Dany© e il thread si sarebbe potuto fermare alla prima risposta, 8 pagine sono molte e si è passato dal problema iniziale del titolo a mille altri aspetti separati, perfino di sintassi e basi del linguaggio, a questo punto Dany avrebbe potuto fare un'intera guida su JavaScript che avrebbe raggiunto e interessato molti più utenti impiegando lo stesso tempo. Non dico che devi studiare un mattone di libro sull'argomento ma almeno fare delle prove, debuggare, comprendere le differenze tra il tuo codice e quello che ti viene suggerito, capire come e perché le cose funzionano così... è il modo migliore per migliorarsi e se seguirai questo metodo riuscirai a cavartela da solo, aiutando anche gli altri e per quando avrai dei dubbi le domande saranno più mirate e chiare.

 

[JunkCoder]

Se non fai console log del risultato della fetch o in then mi sembra normale che tu non lo veda in console. Visto che ignori qualunque risposta e continui a postare nuovi problemi chiudo. Spero che se apri un nuovo thread rileggerai prima i giusti consigli che un po' tutti ti hanno dato.

 

[Dany©]

Ciao!

HTML, div galleria e file input:

<input type="file" name="file" id="file_input">
<div id="galleria">
    <img id="preview" src="" alt="preview" />
</div>

JavaScript, per visualizzare la preview:

const imgInput = document.getElementById('file_input');
imgInput.addEventListener("change", (e) => {
  const [file] = imgInput.files;
  if (file) {
    document.getElementById('preview').src = URL.createObjectURL(file);
  }
})

Puoi adattare la soluzione alle tue esigenze, come vedi la soluzione è VJS ma puoi anche decidere di usare JQuery.

 

[Dany©]

scusami ma perche assegni una funzione con parametro e se gia c'e l'evento change che va parte ogni volta che premo il pulsante x caricare il file? e poi non mi e chiaro perche dichiari una variabile con le parentesi quadre tipo java var x [] = valore
tra l'altro mi hanno consigliato di usare l 'attributo multiple nel tag input file, altri di impostare un name con le [] e sono un po confuso.. aproposito quello che ecmascript e?

Ciao,
onestamente ho guardato la logica che avevi scritto e non mi era chiarissima, inoltre ai fini di quello che chiedevi non era rilevante, quello che ho postato riguarda solo e soltanto la preview di un'immagine caricata.

La "dichiarazione" (assegnazione) che menzioni si chiama Destructuring Assignment, ti lascio la referenza per capire meglio di cosa si tratta.

Per l'input dipende da quello che vuoi fare -- il multiple attribute ti permette di selezionare più file insieme.

In questo pezzo di codice la cosa più recente che vedi è proprio destructuring assignment che se non sbaglio è arrivato con ES6.

 

[Dany©]

Ciao di nuovo,
se vuoi la preview di più immagini devi generare dinamicamente gli elementi nel DOM (a meno che non vuoi seguire un approccio statico ma questo necessita che la quantità di foto caricabili sia ben definita e sempre uguale).
L'approccio dinamico è il seguente:

<input type="file" name="file" id="file_input" multiple>
<div id="gallery">
 
</div>

Nota bene: adesso non devi più destrutturare l'array di file in quanto lo stai già traversando con un ciclo!

const fileInput = document.getElementById('file_input');
fileInput.addEventListener("change", () => {
   for(let file of fileInput.files) {
      const image = file;
      if (image) {
         let imageElement = new Image();
         imageElement.src = URL.createObjectURL(image);
         document.getElementById('gallery').appendChild(imageElement);
      }
   }
});

Vedi: https://jsfiddle.net/DanieleFI/gxq9nkuy/24/


Il codice che hai postato non funziona perché se fa riferimento all'HTML che avevi non hai alcun elemento img con id "preview" a cui settare il source dell'immagine.

 

[Dany©]

nb. ho editato la mia risposta, avevo copiato il tuo codice e ho lasciato qualche typo.

Ho fatto riferimento all'HTML che hai postato nel primo messaggio della discussione, che non aveva alcun tag image con id preview, e l'unica spiegazione per il quale potesse darti errore era che non avessi quell'elemento (ndr., non hai postato HTML nella domanda prima della mia risposta), ergo la mia risposta

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/ per capire perché usare const e let invece di var.

p.s. ovviamente per far funzionare la preview multipla devi generarti gli elementi della galleria dinamicamente, traversando l'array di FileInput.

 

[Dany©]

Sono abbastanza sicuro che l'oggetto che viene utilizzato sia comunque una FileList.
Comunque se fosse un array normale la gestione sarebbe abbastanza semplice

 

[Dany©]

Ciao, mi dispiace ma anche se volessi non ne avrei fisicamente il tempo!
Posso però continuare a darti delle dritte qui su inforge come per il discorso delle preview, la cosa che comunque (vi) ti consiglio è provare, provare e riprovare, sbattere la testa su queste cose e soprattutto fare ricerca riguardo tutto ciò che non ti è chiaro e cercare di imparare le cose che (per ora) non sai!

 

[Dany©]

Ciao,
ti consiglio di pulire un po' il codice perché è difficile da leggere ed interpretare al volo

Comunque, a quale event listener ti stai riferendo?

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

Questo?

P.S. Ti chiedo inoltre di usare JSFiddle, è più comodo visto che stai usando jQuery, perché permette l'import diretto della libreria!

 

[Dany©]

Ho provato il tuo codice e quel listener funziona, quando viene fatto un click sull'imagine viene loggato "4".
Sicuro che non ti stia funzionando?

 

[Dany©]

Ciao,
come ti ho anticipato non ho fisicamente il tempo per seguire il progetto, posso risponderti quando ho un attimo libero

Il problema è qui:

imageElement2.css("transform":"rotate(-90)");

Ti consiglio di leggere le docs della funzione css() di jQuery per capire meglio come funziona.

La soluzione (tenendo per filo e per segno ciò che stai cercando di fare tu) è questa:

$(imageElement2).on('click', function() {
    $(imageElement2).css({ WebkitTransform: 'rotate(-90deg)'});
});

Comunque, ci sono diversi problemi e ti invito (consiglio) a rifletterci:

• Il codice è confuso e alla lunga ti renderai conto che non è mantenibile - è fondamentale, per il proseguo del progetto, che tu riesca a pulirlo e cercare di seguire uno standard (ndr. il prossimo punto parla di questo);
• Stai facendo un po' di confusione nell'utilizzo di jQuery (ti consiglio di guardare attentamente le docs per capire in principio come si usa jQuery e fare più attenzione all'utilizzo delle sue funzioni) e VanillaJS - ricordati che non puoi utilizzare jQuery su elementi VJS (o almeno, non direttamente), questo era un altro problema nel codice - è giusto usare jQuery over Vanilla ove serve, però se decidi di standardizzare il progetto con l'utilizzo di jQuery devi anche mantenerne la logica.

Ti chiedo nuovamente di usare JSFiddle, è molto, molto, molto più facile consultare il codice e debuggarlo per chi ti aiuta

 

[Dany©]

Vedi: https://jsfiddle.net/DanieleFI/6rydawzo/2/

 

[Dany©]

La foto si gira una sola volta perché la rotazione non è cumulativa ma una direttiva fissa.
Quando tu dici rotate(-90deg) setti la rotazione a -90° rispetto alla posizione iniziale.
Per farmi capire in modo semplice:

• Clicco sull'icona per ruotare -> setto la rotazione a -90deg e ruota l'immagine;
• Clicco nuovamente sull'icona per ruotare -> setto nuovamente la rotazione a -90deg, ma questa non va a ruotare rispetto alla rotazione attuale ma rispetto alla posizione iniziale, quindi la posizione rimane invariata.

Per far sì che la rotazione sia continuativa devi tener conto della rotazione attuale con una variabile.
Ti mockuppo una logica ma non ho possibilità di scriverla rispetto al tuo codice al momento.

let rotation = 0;
// ...
// quando clicco sull'icona per ruotare, decremento la rotazione di 90°
rotation -= 90;
$(element).css('transform', `rotate(${rotation}deg)`)

Prova a partire da questo ed adattarlo alla tua necessità.

P.S. Specificità a parte, è importante che tu conosca bene le librerie che usi! Preferisco indicarti di guardare le docs piuttosto che dirti esattamente la risposta, altrimenti non imparerai niente, considerando che stai cercando di fare un progetto immagino che sia interessato a questi argomenti

 

[Dany©]

Quello che ho scritto io funziona
Il codice nel JSFiddle che hai mandato non funziona perché:

• C'è un errore di sintassi qui (una parentesi di troppo alla fine):
  

  $(imageElement).css("transform", "rotate("+toString(rotate)+"deg)"));

• Template Literals FYI

 

[Dany©]

Ciao,
per il caricamento effettivo delle foto hai bisogno di tirarti su il server, dipende dalle tecnologie che vuoi usare ma non è proprio una cosa che si impara in due risposte qui su inforge, dovresti scegliere uno stack tecnologico da usare e studiarti la documentazione.
Ora come ora quello che hai fatto è sviluppare l'interfaccia del tuo progetto.
Tra l'altro, giusto a scopo informativo, la rotazione che hai implementato è solo visiva: se caricassi le foto esse manterrebbero esattamente il formato iniziale.

Onestamente non ho guardato il css, può darsi che su JSFiddle venisse shrinkata la finestra e di conseguenza gli elementi shiftassero direttamente sotto le input, ti consiglio di guardarti come funzionano le Flexbox per imparare a gestire il flow degli elementi.

 

[Dany©]

Perché le tue preview sono puramente visive e come ti ho indicato qualche risposta fa FileList è readonly - considerando l'ultimo JSFiddle che hai condiviso come codice attuale - la tua è una file input singola:

<input type="file" name="file" id="file_input">

Di conseguenza, la tua interfaccia si comporta in questo modo:

• Carichi un'immagine, viene generata la preview;
• Carichi una seconda immagine, viene sostituito il contenuto precedente dell'input e viene generata una nuova preview (la preview precedente non viene eliminata).

Per avere più immagini lì dentro hai bisogno di una input multipla e di caricare le immagini tutte insieme.

 

[Dany©]

(...) come ti ho indicato qualche risposta fa FileList è readonly (...)

Se vuoi mantenere l'elemento STRETTAMENTE nativo, l'unica cosa che puoi fare (che mi viene in mente su due piedi) è generare in modo dinamico le file input ogni volta che carichi un'immagine.

Quindi, partendo da una singola file input iniziale:

• Carico un'immagine;
• Viene generata la preview per questa immagine caricata;
• Genero dinamicamente una nuova file input che mi permette di caricare una nuova immagine.

Tendenzialmente alla fine ti ritroverai con n (n = numero di immagini aggiunte) FileList, ciascuna contenente una delle immagini caricate.

 

[Dany©]

No è diverso, se tu prendi una FileList con N elementi e cerchi di settare l'elemento fileList[n] (dove 0 <= n < N) a qualsisi valore non succederà niente.
L'unica cosa che puoi fare è svuotare l'oggetto.



Vedi: https://jsfiddle.net/DanieleFI/mzL3d8va/16/

se voglio rimuovere il primo mi basta fare fileinpunt.filelist[0] = null

Questo sopra, non si può fare.

 

[Dany©]

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.

 

[Dany©]

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.

 

[Dany©]

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