On peut recevoir les fichiers issus du bureau dans Firefox 3.x :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type="text/javascript">
var dropArea;
// Objet appele par getElementById qui gere la reception des fichiers
var dropAreaObject = 'dropArea';
function initDrop()
{
// Initialize the Listeners
dropArea = document.getElementById (dropAreaObject);
if (dropArea.addEventListener)
{
// Firefox Safari
dropArea.addEventListener ("dragenter", dragenter, true);
dropArea.addEventListener ("dragleave", dragleave, true);
dropArea.addEventListener ("dragover", dragover, true);
dropArea.addEventListener ("drop", drop, true);
}
else
{
// IE
dropArea.attachEvent ("onodragenter", dragenter);
dropArea.attachEvent ("ondragleave", dragleave);
dropArea.attachEvent ("ondragover", dragover);
dropArea.attachEvent ("ondrop", drop);
}
}
function dragenter (e)
{
// Quand on rentre sur la fenetre du navigateur avec un objet en DnD
dropArea.setAttribute("dragenter", true);
document.getElementById (dropAreaObject).innerHTML = "DragEnter";
}
function dragleave (e)
{
// Quand on sort de la fenetre du navigateur avec un objet en DnD
dropArea.removeAttribute("dragenter");
document.getElementById (dropAreaObject).innerHTML = "DragLeave";
}
function dragover (e)
{
// Quand on passe au dessus de la zone de depose
// On bloque le over pour que drop puisse prendre la main lorsqu'on lache
// le fichier
e.preventDefault();
document.getElementById (dropAreaObject).innerHTML = "DragOver";
}
function drop (e)
{
// Lorsque qu'on lache l'objet.
// On bloque l'action par defaut qui est de prendre l'objet dans le navigateur
// si on veut traiter le fichier recu dans le javascript
e.preventDefault();
document.getElementById (dropAreaObject).innerHTML = "Drop";
var dataTransfer = e.dataTransfer;
var fichiers = dataTransfer.files;
if (fichiers.length == 0)
{
// Pas de fichiers : bizarre
return;
}
var texte = "UP: ";
for (var i = 0 ; i < fichiers.length ; i++)
{
// Affiche les fichiers recus (on peut en recevoir plusieurs...)
// Attributs disponibles : fileName, fileSize, mediaType, name, size
// fileName = name, fileSize = size et mediaType est indefini
// Methodes : getAsBinary (), getAsDataURL (), getAsText()
var fichier = fichiers[i];
texte = texte + " fileName="+fichier.fileName+"/fileSize="+fichier.fileSize+"/mediaType="+fichier.mediaType+"/name="+fichier.name+"/size="+fichier.size;
}
document.getElementById (dropAreaObject).innerHTML = texte
}
</script>
<title>Test Drag and drop</title>
</head>
<body>
<div id='dropArea' style='background-color:#cccccc; height:150px'>Upload</div>
<script type='text/javascript'>initDrop();</script>
</body>
</html>
