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
Javascript come vedere in anteprima le foto caricate nel input file prima di mandarle al server
- Autore discussione coronel
- Data d'inizio
- Stato
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/
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
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
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
Ultima modifica:
Capito, rimane l indice anche col vaalore vuoto,.. ma comunque , allora posso solo imviare lw foto al server senza previe?
Messaggio unito automaticamente:
Nn ce proprio nulla da fa ?
Dicevo che se non uso js e mando direttamente il file con php il file o i files arrivano al server, quindi penso che alla fine nn arriva il file originale ma unScusa ma non penso di aver capito quello che mi stai chiedendo
Quello che voglio fare io ovvero caricare le foto, vedere in anteprima e poi mandarle al serverScusa ma non penso di aver capito quello che mi stai chiedendo
Messaggio unito automaticamente:
Se faccio una cosa normale cioe imposto 1 input file con l attributo multiple e poi carico le foto, senza preview e senza codice js le foto arrivano cmq giusto? Perche io mi ricordo che quando dovevo ricevere i files dal server usavo la variabile superglobale files
Non so se ho centrato ciò che stai dicendo ma:
- Certo, se carichi le immagini usando una input multipla in un form e le submitti ad un server impostato per riceverle, arriveranno le immagini che hai caricato;
- Caricare le foto e vederle in anteprima lo abbiamo fatto;
- Mandarle al server no: come ti ho detto dovresti scegliere una tecnologia da usare al backend e studiartela, poi puoi pensare di fare tutta la logica server-side;
- Non so cosa intendi con l'ultima aggiunta al messaggio, sì arrivano se c'è un server impostato per riceverle - non mi è chiaro il nesso con le variabili php.
Nn ho capito il punto 2 e 3, cmq dicevo come mai non e possibile mandare le foto che si possono caricare e vederle in anteprima? Non capisco perche se lo carichi e lo mandi senza anteprima non ci sono problemi, in fin dei conti le foto che arrivano al server sono copie dei files originale o mi sbaglio? Non capisco che succede internamente quando imposti la preview che fa in modo da non rendere inviabili al server
Secondo me non ti è chiara la differenza tra frontend (interfaccia) e backend (server), stai facendo confusione.
L'anteprima non c'entra niente con l'invio dei dati al server: è una cosa puramente grafica, non va a manipolare il dato che viene caricato - tu prendi il file caricato (nella input, sull'interfaccia) e semplicemente estrai le informazioni che ti servono e ti generi un'immagine che viene mostrata in anteprima, non stai facendo nient'altro. Il file contenuto nella tua input non viene manipolato, di conseguenza con un submit del form (ammesso che ci sia un server a cui submittarlo) viene semplicemente mandato il dato nudo e crudo.
L'anteprima non c'entra niente con l'invio dei dati al server: è una cosa puramente grafica, non va a manipolare il dato che viene caricato - tu prendi il file caricato (nella input, sull'interfaccia) e semplicemente estrai le informazioni che ti servono e ti generi un'immagine che viene mostrata in anteprima, non stai facendo nient'altro. Il file contenuto nella tua input non viene manipolato, di conseguenza con un submit del form (ammesso che ci sia un server a cui submittarlo) viene semplicemente mandato il dato nudo e crudo.
Credo che non ci stiamo capendo, io allora nel form ho l attributo method a post e action a output2.php
Ultima modifica:
Allora facciamo un chiarimento, x come stanno le cose, nel codice recente, se io aggiungo 1 file alla volta, e ne scelgo di aggiungere 3 , aggiungendo 1 alla volta nel mio array filelist ne avro solo 1 perche x sceglierme tante dovrei scegliere tutte di 1 colpo solo, ok e fino qua e chiaro, mi hai consigliato di creare li input file x cosi poterne caricare 1 alla volta e averli comunque tutti nella mia filelist e anche qui tutto ok, cio che mi chiedo e ora queste foto contenute nel mio arraylist non posso imviargli al file outpu2.php con ajax? Perche mi ricordo che con ajax si potevano passare dati ma non ho mai provato a usarlo x questo, ma in ogni caso penso che dovrebbe essere possibileOttimo! quindi sai già come funziona il form, non capisco cosa non ti sia chiaro
(e aggiungerei, quindi lasci intendere di aver ben chiara la differenza tra frontend e backend!)
Messaggio unito automaticamente:
Scusa dany fammi sapere se mi sono fatto capire, ce la sto mettendo tutta
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!
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!
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
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ì.
scusami, ho un altro problema, visibile nella console, e non riesco a capire la causa
Vedi: https://jsfiddle.net/tuhe273a/1/
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:
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
L'errore che viene ritornato dice:
Codice:
$(...)[cont</a>.on is not a functionGià 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 seguenteConsiderando 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:
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")).Codice:$(...)[cont</a>.on is not a function
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
- Stato