ldlabs.org - Blog » javascript

Jquery AjaxForm Plugin: Upload di un file con AJAX

Francesco Apollonio — Tue, 05 Jul 2011 10:45:23 +0000

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):


	

		
		
		
		
		
		Pagina di prova

	
	

		

			Filename:

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):


// 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!

Convertire caratteri accentati in caratteri con apice in javascript

Francesco Apollonio — Sat, 05 Mar 2011 12:41:42 +0000

Può sempre servire convertire alcuni caratteri accentati nelle corrispondenti versioni accentate (soprattutto quando i passaggi del testo son molti, magari ci sta di mezzo anche un db o uno dei nodi intermedi non è sotto il nostro controllo).

Questo è il codice che converte tutti i caratteri accentati per la stringa passata come parametro:

function convertCharacters(string) {
 
	conv_map = {
		'À': 'A\'', 'à': 'a\'', 'Á': 'A\'', 'á': 'a\'',
		'È': 'E\'', 'è': 'e\'', 'É': 'E\'', 'é': 'e\'',
		'Ì': 'I\'', 'ì': 'i\'', 'Í': 'I\'', 'í': 'i\'',
		'Ò': 'O\'', 'ò': 'o\'', 'Ó': 'O\'', 'ó': 'o\'',
		'Ù': 'U\'', 'ù': 'u\'', 'Ú': 'U\'', 'ú': 'u\''
	};
 
	for (var i in conv_map) {
		string = string.replace(new RegExp(i, "g"), conv_map[i]);
	} 
 
	return string;
}

Buon lavoro!

javascript shell

Francesco Apollonio — Tue, 01 Mar 2011 14:44:19 +0000

Mi serviva un modo per testare uno scriptino in javascript al volo e mi sono imbattuto in questa pagina:

Script carino e soprattutto molto utile in caso di emergenza!

Da annotare!

ShadowBox JS, media viewer per wordpress

Francesco Apollonio — Fri, 20 Mar 2009 15:42:44 +0000

Precisiamo che si parla di script che permettono di portare in primo piano le immagini presenti sulla propria pagina web.

Dopo aver provato un po di script trovati qua e la, mi son messo a cercare tra i plugin di wordpress ed ecco fatto…

Il plugin in questione si chiama ShadowBox JS, l’installazione è standard, l’ultilizzo semplicissimo… non bisogna far niente per farlo andare

Al massimo se volete potete aggiungere rel=”shadowbox” al link delle vostre immagini per non farla visualizzare come un album.

Buon lavoro.

P.S.
Per le prove utilizzate ovviamente le immagini presenti in qualche mio articolo, ad esempio qui potete vedere come funziona il parametro rel che è stato inserito nelle prime due immagini, nelle ultime due invece no.