DropZone dentro form - PHP

Pubblicità
Giacomo Furlan ha detto:
Sicuro che gli identificativi (id) corrispondano tra HTML e JS? Sembra non riesca a trovare l'input!
Clicca per espandere...

Ultime news: funziona!
Ho inserito all'interno della riga <input type="file" id="fileInput" /> name="xxx" (che è il dato inviato da $_FILES) e funziona tutto.

Ora devo riuscire ad apportare le seguenti migliorie:
- Anteprima del file da caricare
- Possibilità di eliminarlo cliccandoci sopra
- Upload multiplo

Grazie ancora!
 
Ora puoi cavartela con le tue gambe, penso :D

1. Anteprima del file da caricare: hint - tag img con src in base64, unito ad un file reader di javascript al momento del drop del file (vai di Google!)
2. Eliminare cliccandoci sopra: una cosa alla volta :P (dovresti creare una lista dei file, associarli alla lista in input, creare un bottone e gestirlo tramite javascript)
3. Upload multiplo: hint: append (qualcuno ha detto javascript array push?) anziché la sostituzione (assegnazione) della lista dei file dell'input
 
Giacomo Furlan ha detto:
Ora puoi cavartela con le tue gambe, penso :D
Clicca per espandere...
Ottimista...
Giacomo Furlan ha detto:
1. Anteprima del file da caricare: hint - tag img con src in base64, unito ad un file reader di javascript al momento del drop del file (vai di Google!)
2. Eliminare cliccandoci sopra: una cosa alla volta :P (dovresti creare una lista dei file, associarli alla lista in input, creare un bottone e gestirlo tramite javascript)
3. Upload multiplo: hint: append (qualcuno ha detto javascript array push?) anziché la sostituzione (assegnazione) della lista dei file dell'input
Clicca per espandere...

1.Le immagini che carico vengono automaticamente inserite in modo corretto (quadrate, in griglia) all'interno del riquadro di drop?
2.Tutto ciò in js? Se si qui non so proprio come procedere
3.Quale linea del js modifico per inserire il .push? Senza commenti non mi è chiaro dove i file vengono sospesi per poi essere caricati?
4.I controlli di tipo e dimensione del file li avrei inseriti tramite php, devo inserirli anche tramite js (non so come utilizzare .type però )?
 
Automaticamente c'è ben poco :D - come neofita credo che ti stia imbarcando in un compito molto più complesso di quel che pensi.

Per i punti 1 e 2, in teoria, se vuoi creare dei quadrati puoi inserire all'interno del div di drop dei tag img creati dinamicamente tramite javascript (document.createElement e poi dropZone.appendChild). Una volta creato l'elemento puoi aggiungere un event listener che, all'evento 'click', lo cancelli dal DOM (dropZone.removeChild) e, iterando i file dell'input, elimini il file dalla lista. Certo l'input deve avere l'attributo multiple. Come vedi non è proprio semplice.

3. Al posto dell'assegnazione usi il metodo... se leggi il codice dovresti facilmente trovare la linea (fileInput.files = ev.dataTransfer.files come vedi è abbastanza parlante)... qualcosa come fileInput.files.push(ev.dataTransfer.files[0]) (files è anch'esso un array e qui accedi al suo primo (ed ultimo) elemento).

4. Ignora i controlli lato javascript, tanto possono essere facilmente bypassati ed aggiungono solo complessità che, per il momento, fatichi a gestire.
 
Giacomo Furlan ha detto:
Automaticamente c'è ben poco :D - come neofita credo che ti stia imbarcando in un compito molto più complesso di quel che pensi.

Per i punti 1 e 2, in teoria, se vuoi creare dei quadrati puoi inserire all'interno del div di drop dei tag img creati dinamicamente tramite javascript (document.createElement e poi dropZone.appendChild). Una volta creato l'elemento puoi aggiungere un event listener che, all'evento 'click', lo cancelli dal DOM (dropZone.removeChild) e, iterando i file dell'input, elimini il file dalla lista. Certo l'input deve avere l'attributo multiple. Come vedi non è proprio semplice.

3. Al posto dell'assegnazione usi il metodo... se leggi il codice dovresti facilmente trovare la linea (fileInput.files = ev.dataTransfer.files come vedi è abbastanza parlante)... qualcosa come fileInput.files.push(ev.dataTransfer.files[0]) (files è anch'esso un array e qui accedi al suo primo (ed ultimo) elemento).

4. Ignora i controlli lato javascript, tanto possono essere facilmente bypassati ed aggiungono solo complessità che, per il momento, fatichi a gestire.
Clicca per espandere...

La prima domanda era stupidamente retorica, speravo ci fosse un metodo immediato pur sapendo che non esiste.
Adesso guardo cosa fanno le funzioni...
Non ho mai approfondito js, non mi è mai piaciuto e tutto ciò che mi è sempre servito l'ho fatto con php (a dire il vero così mi è stato insegnato, purtroppo(?)). Volevo fare il level-up ma proprio non mi ci trovo, non capisco niente. Ad esempio dopo aver trovato fileinput non ho idea di come aggiungere il push.
Faccio una nuova funzione con all'interno fileinput.push? E poi?
 
Ahahah no :) fileInput è un nodo di tipo input (maddai? :D) il quale ha un attributo chiamato files (che è un array di non ricordo esattamente l'oggetto, ma fondamentalmente... file). Quindi fileInput.files è un array, e come ogni array ha il metodo push :)
 
Giacomo Furlan ha detto:
Ahahah no :) fileInput è un nodo di tipo input (maddai? :D) il quale ha un attributo chiamato files (che è un array di non ricordo esattamente l'oggetto, ma fondamentalmente... file). Quindi fileInput.files è un array, e come ogni array ha il metodo push :)
Clicca per espandere...

Sto provando seguendo le tue istruzioni, ma non capisco bene una cosa: è l' ev.preventDefault() in riga 9, ildropZone.addEventListener('dragover', ev => ev.preventDefault()) in riga 27 o l'ev.preventDefault() in riga 30 che blocca il caricamento fino all'invio del form?
 
Nessuno. Di default se tu immetti un documento in un browser, quello "navigherà" alla sua posizione (file://). Per prevenire questo comportamento si usa ev.preventDefault(), altrimenti non rimarresti sulla pagina.

Il comportamento da te evidenziato è parte di una funzione legata a dei plugin da te evidentemente utilizzati in precedenza. Anche per questa ragione dovresti, almeno all'inizio, evitare di usarle... sarà anche più lento sviluppare, ma quanto meno capisci come si fanno e cosa fanno le varie cose.

ev.preventDefault() - ev è un oggetto di tipo "evento", e stai dicendo di non comportarsi come normalmente farebbe (in questo caso aprire il file nel browser)
dropZone.addEventListener('dragover', ev => ev.preventDefault()) è uno short (o meglio: arrow function) in ecmascript di questo codice equivalente:

JavaScript: 
dropZone.addEventListener('dragover', function (ev) {
    ev.preventDefault();
})

E questo cosa vuol dire?
EventTarget.addEventListener() è un metodo che ti permette di aggiungere un "listener" (un osservatore, diciamo) ad un particolare evento (in questo caso 'dragover') definito nella callback (la funzione). Qui semplicemente si previene il comportamento di default (altrimenti il browser andrebbe (di nuovo) sul file, anziché starsene buono e non far nulla).
 
Pubblicità
Pubblicità
Indietro
Top