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>
Des cookies d'analyse d'audience sont utilisés sur ce site