Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?

Published: 03 septembre 2024
Updated: 03 septembre 2024
| Tags: Javascript;
| Comments
DMCA.com Protection Status

Published: 03 septembre 2024

Updated: 03 septembre 2024

Tags: Javascript;

DMCA.com Protection Status

Introduction

Dans le monde numérique d'aujourd'hui, améliorer l'expérience utilisateur est crucial pour toute application web. Une manière efficace de le faire est de pouvoir télécharger des fichiers en glissant-déposant en utilisant JavaScript. Cette fonctionnalité permet aux utilisateurs de télécharger des fichiers en les glissant simplement dans une zone désignée, rendant le processus plus intuitif. Dans ce guide, nous vous expliquerons comment créer un code pour télécharger des fichiers par glisser-déposer à partir de zéro, avec des aperçus d'images et une soumission automatique du formulaire.submission.

Table des matières

Code de base pour glisser-déposer des fichiers

Vous trouverez ci-dessous la structure de code de base pour créer un téléverseur de fichiers par glisser-déposer. À la fin de cet article, le code complet est fourni pour une référence facile.

Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?
Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?

Structure HTML

Commencez par créer une structure HTML simple qui comprend un élément input caché et un conteneur pour la zone de glisser-déposer. Cette configuration vous permettra d'améliorer visuellement l'interface de glisser-déposer par la suite.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag-and-Drop File Uploader</title>
  <link rel="stylesheet" href="style.css">
</head>

  <h1>Drag-and-Drop File Uploader</h1>
  <div id="drop-area">Drag file here to upload</div>

  <form id="upload-form" action="/" method="post" enctype="multipart/form-data">
    <input type="file" name="docfile" id="file-selector" multiple hidden>
    <div id="preview-container"></div>
  </form>

  <script src="script.js"></script>
</body>
</html>

Style CSS

L'étape suivante consiste à ajouter des styles CSS de base pour améliorer l'attrait visuel de la zone de glisser-déposer et des aperçus de fichiers. Cela contribue à créer une interface utilisateur plus engageante.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* style.css */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }

  h1 {
    text-align: center;
  }

  #drop-area {
    width: 400px;
    height: 200px;
    margin: 20px auto;
    border: 2px dashed #cccccc;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }

  #preview-container {
    text-align: center;
  }

JavaScript pour gérer le glisser-déposer

Maintenant, plongeons dans le code JavaScript qui alimente la fonctionnalité de glisser-déposer. Ce script gère le glisser-déposer des fichiers, leur prévisualisation, ainsi que la soumission automatique du formulaire.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// script.js
  const dropArea = document.getElementById('drop-area');
  const fileSelector = document.getElementById('file-selector');
  const fileInput = document.getElementById('file-selector');
  const uploadForm = document.getElementById('upload-form');

  function preventDefaults(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  dropArea.addEventListener('dragover', preventDefaults);
  dropArea.addEventListener('dragenter', preventDefaults);
  dropArea.addEventListener('dragleave', preventDefaults);
  dropArea.addEventListener('drop', handleDrop);

  function handleDrop(event) {
    preventDefaults(event);
    const files = event.dataTransfer.files;
    if (files.length) {
      fileInput.files = files;
    }
  }

Fonctionnalités supplémentaires pour améliorer l'expérience utilisateur

Mise en surbrillance de la zone de dépôt

Un aspect clé d'une interface de glisser-déposer conviviale est le retour visuel lors des interactions de l'utilisateur. Par exemple, vous pouvez changer la couleur de fond ou le style de bordure de la zone de dépôt lorsque l'utilisateur glisse des fichiers au-dessus. Cela permet aux utilisateurs de savoir que la zone de dépôt est active et prête à recevoir des fichiers.

1
2
3
4
5
6
dropArea.addEventListener('dragover', () => {
   dropArea.classList.add('highlight');
 });
 dropArea.addEventListener('dragleave', () => {
   dropArea.classList.remove('highlight');
 });

Et le CSS correspondant :

1
2
3
4
.highlight {
  border-color: #4CAF50;
  background-color: #f0f0f0;
}

Soumission automatique du formulaire

Pour une expérience utilisateur transparente, vous pouvez configurer le formulaire pour qu'il se soumette automatiquement lorsque des fichiers sont déposés dans la zone. Cela élimine la nécessité pour les utilisateurs de cliquer manuellement sur un bouton de soumission.

1
2
3
function submitFormAutomatically() {
  uploadForm.submit();
}

Enfin, intégrez la fonction submitFormAutomatically() dans la fonction handleDrop :

1
2
3
4
5
6
7
8
function handleDrop(event) {
  preventDefaults(event);
  const files = event.dataTransfer.files;
  if (files.length) {
    fileInput.files = files;
    submitFormAutomatically();
  }
}

Création d'un aperçu des images

Au lieu de la soumission automatique du formulaire, vous pouvez souhaiter fournir aux utilisateurs un aperçu des fichiers qu'ils sont sur le point de téléverser. Cela est particulièrement utile pour les fichiers image.

CSS pour les aperçus d'images :

1
2
3
4
5
6
7
.preview-image {
    object-fit: cover;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ddd;
  }

JavaScript pour les aperçus d'images :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function previewFiles(files) {
     const previewContainer = document.getElementById('preview-container');
     previewContainer.innerHTML = '';
     Array.from(files).forEach(file => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onloadend = function () {
         const img = document.createElement('img');
         img.src = reader.result;
         img.classList.add('preview-image');
         previewContainer.appendChild(img);
       };
     });
   }

Enfin, intégrez la fonction previewFiles(files) dans la fonction handleDrop :

1
2
3
4
5
6
7
8
function handleDrop(event) {
    preventDefaults(event);
    const files = event.dataTransfer.files;
    if (files.length) {
      fileInput.files = files;
      previewFiles(files);
    }
  }

Exemples de code complets

Vous trouverez ci-dessous deux exemples de code complets. Le premier fournit une fonctionnalité de glisser-déposer de base, et le second inclut des fonctionnalités supplémentaires telles que la mise en surbrillance de la zone de dépôt et les aperçus d'images.

Exemple de code 1 : Glisser-déposer de base

 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag-and-Drop File Uploader</title>
  <style>
  /* style.css */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }

  h1 {
    text-align: center;
  }

  #drop-area {
    width: 400px;
    height: 200px;
    margin: 20px auto;
    border: 2px dashed #cccccc;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }

  #preview-container {
    text-align: center;
  }
  </style>
</head>
<body>
  <h1>Drag-and-Drop File Uploader</h1>
  <div id="drop-area">Drag files here to upload</div>

  <form id="upload-form" action="/" method="post" enctype="multipart/form-data">
    <input type="file" name="docfile" id="file-selector" multiple hidden>
    <div id="preview-container"></div>
  </form>

  <script type="text/javascript">

  // script.js
  const dropArea = document.getElementById('drop-area');
  const fileSelector = document.getElementById('file-selector');
  const fileInput = document.getElementById('file-selector');
  const uploadForm = document.getElementById('upload-form');

  function preventDefaults(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  dropArea.addEventListener('dragover', preventDefaults);
  dropArea.addEventListener('dragenter', preventDefaults);
  dropArea.addEventListener('dragleave', preventDefaults);
  dropArea.addEventListener('drop', handleDrop);

  function handleDrop(event) {
    preventDefaults(event);
    const files = event.dataTransfer.files;
    if (files.length) {
      fileInput.files = files;
    }
  }

  </script>
</body>
</html>

Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?
Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?

Exemple de code 2 :

  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
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag-and-Drop File Uploader</title>
  <style>
  /* style.css */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }

  h1 {
    text-align: center;
  }

  #drop-area {
    width: 400px;
    height: 200px;
    margin: 20px auto;
    border: 2px dashed #cccccc;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }

  #preview-container {
    text-align: center;
  }

  .highlight {
    border-color: #4CAF50;
    background-color: #f0f0f0;
  }

  .preview-image {
    object-fit: cover;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ddd;
  }

  </style>
</head>
<body>
  <h1>Drag-and-Drop File Uploader</h1>
  <div id="drop-area">Drag file here to upload</div>

  <form id="upload-form" action="/" method="post" enctype="multipart/form-data">
    <input type="file" name="docfile" id="file-selector" multiple hidden>
    <div id="preview-container"></div>
  </form>

  <script type="text/javascript">

  // script.js
  const dropArea = document.getElementById('drop-area');
  const fileSelector = document.getElementById('file-selector');
  const fileInput = document.getElementById('file-selector');
  const uploadForm = document.getElementById('upload-form');

  function preventDefaults(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  dropArea.addEventListener('dragover', preventDefaults);
  dropArea.addEventListener('dragenter', preventDefaults);
  dropArea.addEventListener('dragleave', preventDefaults);
  dropArea.addEventListener('drop', handleDrop);

  function handleDrop(event) {
    preventDefaults(event);
    const files = event.dataTransfer.files;
    if (files.length) {
      fileInput.files = files;
      previewFiles(files);
    }
  }

  dropArea.addEventListener('dragover', () => {
     dropArea.classList.add('highlight');
   });
   dropArea.addEventListener('dragleave', () => {
     dropArea.classList.remove('highlight');
   });

   function previewFiles(files) {
     const previewContainer = document.getElementById('preview-container');
     previewContainer.innerHTML = '';
     Array.from(files).forEach(file => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onloadend = function () {
         const img = document.createElement('img');
         img.src = reader.result;
         img.classList.add('preview-image');
         previewContainer.appendChild(img);
       };
     });
   }

  </script>
</body>
</html>

Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?
Comment télécharger un fichier en le glissant et déposant directement dans un formulaire avec JavaScript ?

Références

Pour en savoir plus et pour des implémentations plus avancées, consultez les ressources suivantes :

Links Site
how-to-make-a-drag-and-drop-file-uploader Uploadcare Blog
MDN Web Docs: Drag and Drop API Mozilla Developer Network
HTML5 Drag and Drop Tutorial Smashing Magazine

Ces ressources offrent des explications détaillées et des exemples pour vous aider à améliorer et personnaliser votre téléverseur de fichiers par glisser-déposer.

Creative Commons License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Author profile-image

Benjamin

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Skills
  • Remote sensing
  • Python
  • Machine Learning
  • Tensorflow 2.0
Image

of