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!
