Simone D'Amico Blog - Web Design Tutorials – jQuery, CSS, PHP, Wordpress

Lo script di oggi ci consente di effettuare degli upload utilizzando jQuery e la tecnologia Ajax. E’ utile utilizzare l’Ajax perchè ad esempio ci permette di effettuare upload multipli senza aspettare di ricaricare la pagina.

Innanzitutto dobbiamo scaricare il plugin per jQuery al seguente link: Ajax_Upload

Includiamo ora il file nel nostro progetto e creiamo il codice Javascript necessario alla realizzazione:

$(document).ready(function(){

    $.ajax_upload('#div_id', {
      // Location of the serverside upload script
      action: 'http://mysite.com/upload.php',
      // File upload name
      name: 'userfile',
      //Additional data to send
      data: {
        key1 : 'value1',
        key2 : 'value2'
      },
      /**
       * Callback function that gets called when user selects file
       * @param filename File name of the file that was selected
       * @param extension Extension of that file
       * @return You can return false to cancel upload
       */
      onSubmit: function(filename, extension) {},
      /**
       * Callback function that gets called when file upload is completed
       * @param filename File name of the file that was selected
       * @param response Server script output
       */
      onComplete: function(filename, response) {},
      /**
       * Callback function that gets called when server returns "success" string
       * @param filename File name of the file that was selected
       */
      onSuccess: function(filename){},
      /**
       * Callback function that gets called when server returns something else,
       * not the "success" string
       * @param filename File name of the file that was selected
       * @param response Server script output
       */
      onError: function(filename, response){}
    });

});

Il codice PHP necessario (attenzione perchè il codice PHP è molto basilare, utile come esempio ma consiglio di migliorarlo per utilizzarlo):

$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  echo "error";
}

Infine quello html:

<style type="text/css">
.example_loading {
    display: none;
}

.upload {
    overflow: hidden;
    position: relative;
    height: 50px;
    width: 200px;
    display: block;
}

input {
    margin: 0pt;
    padding: 0pt;
    position: absolute;
    width: 220px;
    opacity: 0;
    top: 45px;
    left: -3px;
}
</style>

<div id="example">
<div id="example_loading">Uploading</div>
<div class="upload">
    <div id="example_button">Upload</div>
    <input style="" class="" id="" name="myfile" type="file"/></div>
</div>

Potete vedere un esempio a questo link: Examples Ajax Upload