Grâce à HTML5 il est désormais possible d’envoyer des fichiers via une page web directement par drag & drop (glisser/déposer).
Dans l’exemple qui suit j’ai utilisé le plugin JQuery HTML5 fileupload pour réalisé cette opération.
Voici le code à placer dans le <head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.html5-fileupload.js"></script>
<script type="text/javascript">
window.onload = function() {
var files = new Array();
$('#drag').fileUpload(
{
//url qui traitera les fichiers envoyés
url: 'upload.php',
type: 'POST',
dataType: 'json',
beforeSend: function (xhr, s) {
$('#statut').html("Envoi en cours...");
},
complete: function () {
$('#statut').html("Terminé");
},
success: function (result, status, xhr) {
$('#drop').html($('#drop').html()+'<img src="uploads/'+result.name+'" />');
}
});
};
</script>
Et voici le code HTML du <body> :
<section id="drag"></section> <section id="drop"></section> <p id="#statut"></p>