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.