Questo articolo mostra un esempio su come realizzare un form per upload di immagini senza ricaricare la pagina, cioè utilizzando AJAX, graficamente basato su Bootstrap.

Il tutto è composto da un file index scritto in semplice HTML5, che si serve di uno script jQuery per effettuare la chiamata AJAX ed inviare l’immagine ad uno script PHP che riceve e processa l’immagine. Non necessità di CSS aggiuntivo.

Per vederlo in azione:

Live demo

Ecco il codice dei vari componenti:

• index.html (vedere righe 49-74)

• upload-image.js

• upload-image.php

Per scaricare tutti i file sorgenti del form per upload di immagini:

Download codice form per upload di immagini