JQuery HTML5 fileupload

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&eacute;");
},
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>

DémonstrationTélécharger le ZIP


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*