Glisser des fichiers dans la page
Gérez les fichiers déposés depuis le bureau.
Glisser des fichiers dans la page est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Fichiers du bureau
Au-delà du déplacement d’éléments, l’API Glisser-déposer permet aux utilisateurs de faire glisser des fichiers depuis leur système d’exploitation vers votre page — c’est la base des zones de dépôt pour l’envoi de fichiers.
Accepter les dépôts de fichiers
La configuration est similaire à celle des dépôts d’éléments : empêchez l’action par défaut sur dragover et drop. La différence est que vous lisez des fichiers au lieu d’utiliser getData.
dropzone.addEventListener("dragover", (e) => e.preventDefault());dataTransfer.files
Lors d’un dépôt, e.dataTransfer.files est une FileList contenant les objets File déposés.
dropzone.addEventListener("drop", (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files.length, "file(s) dropped");
});Parcourir les fichiers
Une FileList ressemble à un tableau. Convertissez-la avec l’opérateur de décomposition pour la parcourir à l’aide des méthodes des tableaux.
const files = [...e.dataTransfer.files];
files.forEach((file) => {
console.log(file.name, file.size, file.type);
});Métadonnées des fichiers
Chaque File expose name, size (en octets), type (MIME) et lastModified sans lire son contenu.
console.log(file.name); // "photo.png"
console.log(file.type); // "image/png"
console.log(file.size); // 20481Filtrer par type
Validez les fichiers déposés avant de les traiter — par exemple, n’acceptez que les images.
const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");Lire le contenu des fichiers
Utilisez FileReader pour lire un fichier. readAsText sert à lire du texte et readAsDataURL à créer des aperçus.
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);Afficher un aperçu des images déposées
URL.createObjectURL(file) fournit une URL d’aperçu instantanée sans lire l’intégralité du fichier. Révoquez-la lorsque vous avez terminé afin de libérer de la mémoire.
const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);items et fichiers
dataTransfer.items est plus riche que files : chaque DataTransferItem indique kind (« file » ou « string ») et peut fournir un fichier ou une entrée de répertoire.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
}
}Envoyer les fichiers déposés
Placez les fichiers dans FormData et envoyez-les à votre serveur avec POST.
const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });Éviter la navigation accidentelle
Si un fichier est déposé en dehors de votre zone, le navigateur ouvre ce fichier. Protégez l’ensemble du document pour empêcher cela.
window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());Vérification rapide
Testez les dépôts de fichiers.
Récapitulatif : glisser des fichiers
Vous avez créé une zone de dépôt de fichiers, lu dataTransfer.files, examiné les métadonnées, filtré par type, affiché un aperçu des images avec des URL d’objet, utilisé FileReader, envoyé des fichiers avec FormData et empêché la navigation accidentelle. Cela termine la partie consacrée au glisser-déposer.
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 59
- Leçons
- 200
Questions Fréquemment Posées
La leçon « Glisser des fichiers dans la page » est-elle gratuite ?
Oui — le texte complet de « Glisser des fichiers dans la page » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Glisser des fichiers dans la page » ?
Gérez les fichiers déposés depuis le bureau. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Glisser des fichiers dans la page » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rendre des éléments déplaçables
- Cibles de dépôt et dataTransfer
- Retour visuel pendant le glisser-déposer
- Glisser des fichiers dans la page