Jquery AjaxForm Plugin: Upload di un file con AJAX
Posted: luglio 5th, 2011 | Author: Francesco Apollonio | Filed under: Javascript, Programmazione, recensione | Tags: ajax, code tips, form, Guide, html, javascript, jquery, plugin, utility, varie, web | No Comments »
Sviluppano spesso siti web di vario genere, mi sono trovato a dover gestire un form html con Ajax. Il problema non è stato tanto per i dati testuali normali, quanto principalmente perchè dovevo trasferire un file via AJAX.
Lo strumento che ho utilizzato è JQuery Form Plugin. Tre parole per descriverlo? Semplice, rapido e funzionante!
Per prima cosa vediamo la pagina HTML (con l’annesso form per l’upload):
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.5.1.min.js" ></script> <script type="text/javascript" src="jquery.form.js" ></script> <script type="text/javascript" src="scripts.js" ></script> </script> <title>Pagina di prova</title> </head> <body> <form action="file_upload.php" method="post" enctype="multipart/form-data" id="upload"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /><br /> <input type="submit" id="send_file" value="Aggiungi" /> </form> </body> </html>
Ovviamente, come si può vedere analizzando l’html, occorrono altri due file. Il primo è il file javascript che ci permetterà di gestire l’invio lato client. Il secondo è il file in PHP che ci permette di gestire l’upload dal lato server. Analizziamo il file javascript (script.js):
$(document).ready(function() {
$("#upload").ajaxForm(function(resp) {
alert(resp);
});
});
Come si può facilmente capire il funzionamento è semplice. Basta associare l’AjaxForm all’id del form html ed il gioco è fatto. Ovviamente nella funzione di risposta si può effettuare qualsiasi operazione, utilizzando la variabile resp che contiene l’output della pagina che si occupa dell’upload lato server. Ecco il codice PHP (file_upload.php):
<?php
// CONTROLLO DEI PARAMETRI!
$path="PERCORSO_DOVE_SALVARE_IL_FILE/";
if ($_FILES["file"]["error"] > 0) {
echo "ERROR";
} else {
if (file_exists($path . $_FILES["file"]["name"])) {
echo "File already exists.";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], $path . $_FILES["file"]["name"]);
echo "OK. File uploaded.";
}
}
?>
che semplicemente salva il file nella directory specificata e ritorna un messaggio che indica se l’operazione è andata a buon fine. Ricordatevi ovviamente, se utilizzate lo script in PHP per il vostro sito, di eseguire le operazioni di controllo dei parametri in ingresso via POST.
Come potete vedere è veramente una passeggiata, buon lavoro!
Leave a Reply