1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| var depose=document.getElementById("depose");
depose.addEventListener("click", function(evt) {
evt.preventDefault();
document.getElementById("file").click();
});
depose.addEventListener("dragover", function(evt) {
evt.preventDefault(); /* Pour autoriser le drop par JS */
});
depose.addEventListener("dragenter", function(evt) {
this.className="onDropZone"; /* Passe en surbrillance */
});
depose.addEventListener("dragleave", function(evt) {
this.className=""; /* La surbrillance s'efface */
});
depose.addEventListener("drop", function(evt) {
evt.preventDefault();
/* Tranfert de la liste des fichiers du drag and drop dans input file */
document.getElementById("file").files=evt.dataTransfer.files;
this.className=""; /* Surbrillance supprimée */
});
// À partir d'ici ça fonctionne plus ou moins
document.getElementById("file").addEventListener("change", function(evt){
var p=document.getElementById("preview"); /* Bloc d'affichage fichiers */
p.innerHTML=""; /* Effacer le contenu initial de #preview */
for (var i=0; i<this.files.length; i++) {
var f=this.files[i];
var div=document.createElement("div");
div.className="fichier";
var span=document.createElement("span");
span.innerHTML=f.name+" ("+getHumanSize(f.size)+")";
var vignette=document.createElement("img");
vignette.src = window.URL.createObjectURL(f);
/* Attacher les éléments HTML au DOM */
div.appendChild(vignette);
div.appendChild(span);
p.appendChild(div);
}
p.style.display="block";
}); |
Partager