Javascript come vedere in anteprima le foto caricate nel input file prima di mandarle al server
- Autore discussione coronel
- Data d'inizio
- Stato
Non funziona perché, come ti ho menzionato nel punto due dei problemi, dovresti studiarti un po' come funziona jQuery in modo da avere una visione più completa e sicura della tecnologia, stai facendo confusione con gli elementi VJS e jQuery - utilizzando funzioni dell'ultimo su elementi del primo - e questa cosa fa sì che il codice ritorni errori di sintassi e/o semplicemente non funzioni.
Ultima modifica:
fammi capi se ho capito bene, il problema e dovuto perche uso funzioni di jquery su elementi vjs? cmq il metodo click e il on sono entrambi metodi di jquery
Messaggio unito automaticamente:
se fossi stato un po piu speficifico e mi avresti detto che i metodi jquery non funzionano su variabili normali e che bisognava selezionarli prima, magari avrei capito subito, mi e nuova questa cosa, perche di solito jquery li uso con i tag html e non con le variabili, che contengono tag html, suona confuso lo so, ma non pensavo che la funziona di selezione $() fosse applicata anche x le variabili, cmq penso che se avrei dichiarato la variabile imageelement in questo modo $imageElement nn avrei dovuto usare la funziona selezione, ma vabbe, in ogni caso, ora c'e u nuovo problema aha , la foto si gira solo 1 volta
Vedi: https://jsfiddle.net/soyrhc8p/1/
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:
Ti mockuppo una logica ma non ho possibilità di scriverla rispetto al tuo codice al momento.
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
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.
Ti mockuppo una logica ma non ho possibilità di scriverla rispetto al tuo codice al momento.
JavaScript:
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
ho capito ma non va cmqLa 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:
Per far sì che la rotazione sia continuativa devi tener conto della rotazione attuale con una variabile.
- 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.
Ti mockuppo una logica ma non ho possibilità di scriverla rispetto al tuo codice al momento.
JavaScript: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
Vedi: https://jsfiddle.net/soyrhc8p/3/
Quello che ho scritto io funziona
Il codice nel JSFiddle che hai mandato non funziona perché:
Il codice nel JSFiddle che hai mandato non funziona perché:
- C'è un errore di sintassi qui (una parentesi di troppo alla fine):
JavaScript:$(imageElement).css("transform", "rotate("+toString(rotate)+"deg)")); - Template Literals FYI
ook, non mifa vede piu l'errore di sinstassi ma cmq l imagine resta fermaQuello 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):
JavaScript:$(imageElement).css("transform", "rotate("+toString(rotate)+"deg)"));- Template Literals FYI
Vedi: https://jsfiddle.net/soyrhc8p/4/
Sinceramente....Ma fai attenzione alle risposte che ti vengono date?
La vedi la differenza tra:
Codice:
`rotate(${rotation}deg)`e il tuo:
Codice:
"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.si avevo visto che lui lo scrive senza usare la funzione tostring, ma non capisco perche si funziona senza la funziona, in fin dei conti la funzione css si aspetta 2 stringhe
Template Literals FYI
Questo è già una stringa, non hai bisogno di castarlo
Inoltre, il cast in String (in JS) ha la seguente sintassi:
JavaScript:
`rotate(${rotation}deg)`Questo è già una stringa, non hai bisogno di castarlo
Inoltre, il cast in String (in JS) ha la seguente sintassi:
JavaScript:
let pippo = ...
pippo.toString()ho provato ad attivare l'altro bottone quello x girare in senso orario, ma gira male aha, guardaTemplate Literals FYI
JavaScript:`rotate(${rotation}deg)`
Questo è già una stringa, non hai bisogno di castarlo
Inoltre, il cast in String (in JS) ha la seguente sintassi:
JavaScript:let pippo = ... pippo.toString()
Vedi: https://jsfiddle.net/soyrhc8p/6/
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?
Ultima modifica:
scusate raga, penso di essere arrivato a buon punto, ora dovrei poter inviare tutte le foto che avevo caricato al server ma non so come muovermi sapreste darmi qualche dritta?
Vedi: https://jsfiddle.net/soyrhc8p/8/
Messaggio unito automaticamente:
scusate sapreste dirmi come mai in localhost la foto x aggiungere altre foto viene a fianco e nel jsfiddle a capo? lo vorrei come in jsfiddle ovviamente
Allegati
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.
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.
Ultima modifica:
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:
cmq ieri mi sono scordato di ringraziare anche didymond, e anche l offerta di aiuto x i progetti
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:
Di conseguenza, la tua interfaccia si comporta in questo modo:
HTML:
<input type="file" name="file" id="file_input">- 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).
Ultima modifica:
ho aggiunto l'attributo multiple ma continua a restituire solo un array di 1 elemento
Vedi: https://jsfiddle.net/tuhe273a/
Messaggio unito automaticamente:
vedo che se le carico 2 foto insieme mi carica tute 2 preview e si salvano nel arraylist, ma non c'e un modo x caricare 1 alla volta e averle tutte nel array? perche pensa dal pc ce bisogno di premere il tasto ctrl x fare la selezione multipla, potrei mettere un avviso dicendo al utente di premere il tasto x scegliersi i files, ma dal telefono sarebbe un problema
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.
Scusa ma non ho ancora capito perche continui a ribattere che file list e readonly.. esattamente che significA? Per me solo lettura ma se xmette di salvare tante foto non penso che sia cosi readonly, cmq rispetto alla generazione dei nuovi file input non capisco che senso avrebbe, eventualmente riesci a girarmi il codice perche non saprei come implementarlo
Non continuo a ribattere la mia teoria sul fatto che sia readonly, è così.
FileList non permette di modificare la sua struttura nel momento in cui viene creata. Non puoi scegliere di rimuovere un elemento, non puoi scegliere di modificare un elemento. Tutto ciò che puoi fare è sostituire i vecchi dati con dei dati nuovi.
Tra l'altro, dovresti cercare di separare frontend da backend. FileList non ti permette di salvare niente, tu stai semplicemente indicando di voler caricare X file fornendo all'interfaccia i dati inerenti, a tutti gli effetti non stai ancora salvando niente.
Vedi: https://jsfiddle.net/DanieleFI/95d7wxo8/63/
Ho riscritto solo quella parte da 0, partendo dal tuo ci metterei molto più tempo perché è leggermente confuso (per me).
Puoi partire da qui e prendere spunto
P.S. non sto usando jQuery ma Vanilla JS.
FileList non permette di modificare la sua struttura nel momento in cui viene creata. Non puoi scegliere di rimuovere un elemento, non puoi scegliere di modificare un elemento. Tutto ciò che puoi fare è sostituire i vecchi dati con dei dati nuovi.
Tra l'altro, dovresti cercare di separare frontend da backend. FileList non ti permette di salvare niente, tu stai semplicemente indicando di voler caricare X file fornendo all'interfaccia i dati inerenti, a tutti gli effetti non stai ancora salvando niente.
Vedi: https://jsfiddle.net/DanieleFI/95d7wxo8/63/
Ho riscritto solo quella parte da 0, partendo dal tuo ci metterei molto più tempo perché è leggermente confuso (per me).
Puoi partire da qui e prendere spunto
P.S. non sto usando jQuery ma Vanilla JS.
Non continuo a ribattere la mia teoria sul fatto che sia readonly, è così.
FileList non permette di modificare la sua struttura nel momento in cui viene creata. Non puoi scegliere di rimuovere un elemento, non puoi scegliere di modificare un elemento. Tutto ciò che puoi fare è sostituire i vecchi dati con dei dati nuovi.
Tra l'altro, dovresti cercare di separare frontend da backend. FileList non ti permette di salvare niente, tu stai semplicemente indicando di voler caricare X file fornendo all'interfaccia i dati inerenti, a tutti gli effetti non stai ancora salvando niente.
Vedi: https://jsfiddle.net/DanieleFI/95d7wxo8/63/
Ho riscritto solo quella parte da 0, partendo dal tuo ci metterei molto più tempo perché è leggermente confuso (per me).
Puoi partire da qui e prendere spunto
P.S. non sto usando jQuery ma Vanilla JS.
scusa continuo a non capire, tu dici che non posso rimuovere o aggiungere o modificare l array filelist, ma io invece riesco, tipo si puo aggiungere nuovi fiels al array e si puo accedere tramite il indice numerico, poi se voglio togliere basta impostare un valore null al indice..
Ti assicuro che non è così, FileList non permette di modificare il suo contenuto - puoi accedere agli elementi, puoi visualizzarli, non puoi modificarli e non puoi rimuoverli in modo specifico.
Tra l'altro scusa, in che senso "se voglio togliere basta impostare un valore null al indice.."? Hai un solo elemento perché la tua input è singola, è chiaro che puoi sovrascriverne il contenuto ricaricando un file.
Ci sono workaround, te l'ho già menzionato: puoi fare un po' di ricerche ed adattare ciò che trovi alla tua situazione.
Tra l'altro scusa, in che senso "se voglio togliere basta impostare un valore null al indice.."? Hai un solo elemento perché la tua input è singola, è chiaro che puoi sovrascriverne il contenuto ricaricando un file.
Ci sono workaround, te l'ho già menzionato: puoi fare un po' di ricerche ed adattare ciò che trovi alla tua situazione.
Aspe forse ho capito,.. allora quando dico che e possibile rimuovere i files intendo questo guarda ti faccio un esempio, se io carico 2 foto nel mio array list ho 2 indici, se voglio rimuovere il primo mi basta fare fileinpunt.filelist[0] = null o '' questo intendevo, ma forse tu intendevi che non esistono metodi nativi come accade con li array ordinari cioe array.pop
- Stato