File upload in Ajax
Con questo breve tutorial vedremo come realizzare un elementare sistema di file upload usando PHP e Ajax.
A dire la verità non è possibile realizzare un sistema di file-upload in Ajax puro a causa delle limitazioni di Javascript (su cui si basa Ajax) in campo di sicurezza.
La soluzione è quella di simulare l’effetto asincrono tramite un iframe.
Abbiamo quindi bisogno di:
- Un form HTML
- Un javascript che esegua una animazione, chiamato al submit del form.
- Uno script PHP che esegua l’upload vero e proprio
- Un iframe invisibile nella stessa pagina del form
Il form HTML è davvero semplice, c’è un campo per la scelta del file e un bottone.
Da notare il parametro enctype che indica il tipo di codifica.
<form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" /> <input name="submitBtn" type="submit" value="Upload" /> </form>
A questa pagina c’è da aggiungere un blocco che mostrerà l’animazione durante l’upload e per dare la conferma all’utente che l’operazione è riuscita. Inoltre, come già detto, aggiungiamo un iframe invisibie da usare come target del form.
<p id="f1_upload_process">Loading... <img src="loader.gif" alt="" /></p> <p id="result"></p> <form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" /> <input name="submitBtn" type="submit" value="Upload" /> </form> <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
Scriviamo adesso la semplice funzione javascript che rende il blocco contenente l’animazione visibile sulla pagina.
function startUpload(){ document.getElementById('f1_upload_process').style.visibility = 'visible'; return true; }
E di riflesso scriviamo anche la funzione che verrà chiamata al termine del processo per mostrare un messaggio all’utente e fermare l’animazione.
function stopUpload(success){ var result = ''; if (success == 1){ document.getElementById('result').innerHTML = '<span class="msg">The file was uploaded successfully!< \/span><br /><br />'; } else { document.getElementById('result').innerHTML = '<span class="emsg">There was an error during file upload!< \/span><br /><br />'; } document.getElementById('f1_upload_process').style.visibility = 'hidden'; return true; } </span></span>
Visto che ci siamo diamo un po’ di stile al nostro form con qualche regola CSS
#f1_upload_process{ z-index:100; position:absolute; visibility:hidden; text-align:center; width:400px; margin:0px; padding:0px; background-color:#fff; border:1px solid #ccc; } form{ text-align:center; width:390px; margin:0px; padding:5px; background-color:#fff; border:1px solid #ccc; }
Ora passiamo alla parte server.
Dovrebbe essere abbastanza semplice da capire, spieghiamo comunque qualcosa. Prima di tutto andiamo a settare il percorso di destinazione del file. Poi introduciamo una variabile che ci conterrà l’eventuale errore in fase di upload del file.
Procediamo quindi a spostare il file dalla directory temporanea alla sua destinazione finale.
Il codice PHP dovrebbe essere una cosa del genere
< ?php $destination_path = getcwd().DIRECTORY_SEPARATOR; $result = 0; $target_path = $destination_path . basename( $_FILES['myfile']['name']); if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) { $result = 1; } sleep(1); ?>
Come visto nelle proprietà del form il codice PHP verrà eseguito all’interno dell’iframe nascosto. A questo punto non ci rimane che aggiungere al suo interno il codice js che chiamerà la funzione scritta precedentemente e che notificherà l’utente se l’upload è andato a buone fine o meno
<script language="javascript" type="text/javascript"> window.top.window.stopUpload(< ?php echo $result; ?>); </script>
Cosa vi avevo detto? Facile e veloce.
Se vi siete persi qualche passaggio o non vi è del tutto chiaro il funzionamento, se volete farmi i complimenti o mandarmi a cag*re, se volete invitarmi a cena fuori fatelo pure nei commenti.
Ping this!
Fringe inizia come Lost, un aereo che precipita, ma le somiglianze sembrano fermarsi qui. Dal pilot sembrerebbe che tutte le puntate faranno storia a se, un po’ come succedeva con X-Files, ma dietro ci sarà sempre un filo conduttore unico.
