Formation HTML5 : Glisser-déposer et l'API Système fichiers
HTML5 - accès matériel et stockage

Formation HTML5 : Glisser-déposer et l'API File

  1. Description de l'API
  2. Exemple

Glisser-déposer et l'API File

Glisser-déposer un fichier texte ici (Firefox 3.6+)

Glisser-déposer et l'API File : Exemple


dropzone=document.getElementById("droptest");

dropzone.addEventListener("dragover", function(event) {
  event.preventDefault();

}, true);
dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Prêt à faire qqch avec l'objet
  var allTheFiles = event.dataTransfer.files;

  getAsText(allTheFiles[0]);

}, true);
dropzone.addEventListener("dragenter", function(event) {
  event.preventDefault();
  dropzone.className = "dragenter";

}, true);
dropzone.addEventListener("dragleave", function(event) {
  event.preventDefault();
  dropzone.className = "";

}, true);


function getAsText(readFile) {

  var reader = new FileReader();

  // Lire le fichier en UTF-8
  reader.readAsText(readFile, "UTF-8");

  // Gère le processus et le erreurs

  reader.onload = loaded;
  reader.onerror = errorHandler;
}


function loaded(evt) {
	document.getElementById("droptest").innerHTML = evt.target.result;
}

function errorHandler(evt) {
	alert("Désolé, il y a eu une erreur");
}