Caricare file da un qualsiasi elemento e inviarlo una volta scelto? SI PUO’! (trick)

SPIEGAZIONE RAPIDA

Spostare fuori dallo schermo un input file e con jQuery puoi simulare un click su quel campo, che DEVE rimanere non hidden o non si aprirà, facendo qualsiasi azione, e inviarlo appena scelto il file da caricare

FINE SPIEGAZIONE RAPIDA

Scenario: Avatar di un sito, l’utente vuole cambiare immagine e si trova il solito form… non è un gran che moderno e originale, giusto?

Noi vogliamo che al click dell’immagine (e magari di un pulsante) si apra la scelta del file e una volta scelto venga caricato e salvato immediatamente.

SI. PUO’. FARE!

Semplice form html (mettiamo un campo ID per l’id dell’utente, pensando ad un possibile utilizzo in un pannello di controllo)

<form id="cambiaImmagine" method="post" enctype="multipart/form-data" action="salva.php">
	<input type="file" id="immagine" name="immagine" style="position:absolute; top:-500px;">
	<input type="hidden" name="id" value="<?=$id?>">
</form>
<img src="http://placehold.it/200x200" class="apriFile" />

Form con scelta file e campo nascosto con l’id dell’utente.
Per ultimo la nostra immagine che, una volta cliccata, aprirà la scelta file, perché ha la classe “apriFile” che noi useremo per cogliere l’azione del click.
Per chi se lo stesse chiedendo: SI. Tutti gli elementi che avranno come classe “apriFile” apriranno QUEL file in QUEL form (se ne possono fare infiniti!!!).
Poi.
Ci serve jQuery!
Importiamolo da google con:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Ultimo ma non ultimo il codice per simulare un click E per inviare il form in automatico:

<script>
$(document).ready(function(){
	$('. apriFile').on("click",(function(){
		$('#immagine').click();
	}));

	$('#immagine').change(function() {
	    $('#cambiaImmagine').submit();
	});
});
</script>

FINE!
SI! FINE!

Basta spostare FUORI schermo il form (o anche solo il campo file) e jQuery farà il resto. Una piccola hackerata del sistema ed ecco una bella magia!

[TIP] Se il tuo file è un immagine ti consiglio di guardare questo mio articolo (https://portapipe.wordpress.com/2015/01/31/carica-e-ridimensiona-immagini-al-volo-upload-resize-image/) che ti fa usare una sola riga per verificare dimensione, estensione del file e caricamento automatico in una cartella a tua scelta, compreso un ridimensionamento se l’immagine è troppo grande rispetto alle tue esigenze!

Buon Coding!

Annunci

, , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: