Jquery AjaxForm Plugin: Upload di un file con AJAX


Posted: luglio 5th, 2011 | Author: | Filed under: Javascript, Programmazione, recensione | Tags: , , , , , , , , , , | 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

  • Articoli Recenti:

  • Tag

  • Categorie

  • Meta

  • Licenza Creative Commons

    Copyright © 2019, | ldlabs.org – Blog is proudly powered by WordPress All rights Reserved | Theme by Ryan McNair modified By Francesco Apollonio

    Smilla Magazine Il Bloggatore iwinuxfeed.altervista.org Feedelissimo - tecnologia WebShake - tecnologia