HTML5, JavaScript: glisser-déposer le fichier de la fenêtre externe (Explorateur Windows)
Puis-je demander un bon exemple de travail de HTML5 File Drag and Drop implémentation? Le code source devrait fonctionner si le glisser-déposer est effectué à partir d'une application externe (Explorateur Windows)à la fenêtre du navigateur. Il devrait fonctionner sur autant de navigateurs que possible.
Je voudrais demander un exemple de code avec une bonne explication. Je ne souhaite pas utiliser de bibliothèques tierces, car je devrai modifier le code en fonction de mes besoins. Le code doit être basé sur HTML5 et JavaScript . Je ne souhaite pas utiliser JQuery.
J'ai passé toute la journée à chercher une bonne source de matériel, mais étonnamment, je n'ai rien trouvé de bon. Les exemples que j'ai trouvés ont fonctionné pour Mozilla mais n'ont pas fonctionné pour Chrome.
3 réponses
Voici un exemple simple. Il montre un carré rouge. Si vous faites glisser une image sur le carré rouge, elle l'ajoute au corps. J'ai confirmé que cela fonctionne dans IE11, Chrome 38 et Firefox 32. Voir l'article Html5Rocks pour une explication plus détaillée.
var dropZone = document.getElementById('dropZone');
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
// finished reading file data.
var img = document.createElement('img');
img.src= e2.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file); // start reading the file data.
}
}
});<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>Regardez dans l'événement ondragover. Vous pouvez simplement avoir un intérieur d'un div qui est caché jusqu'à ce que l'événement ondragover déclenche une fonction qui montrera le div avec le dedans, laissant ainsi l'utilisateur glisser-déposer le fichier. Avoir un onchange déclaration sur l' " permet d'appeler automatiquement une fonction (comme le téléchargement) lorsqu'un fichier est ajouté à l'entrée. Assurez-vous que l'entrée permet plusieurs fichiers, car vous n'avez aucun contrôle sur le nombre qu'ils vont essayer de glisser dans le navigateur.