Comment implémenter les fonctions de téléchargement et de téléchargement de fichiers en javascript

Dans le développement Web moderne, le téléchargement de fichiers est une exigence fréquemment rencontrée. En tant que l'un des langages de développement front-end, JavaScript fournit de nombreuses bibliothèques d'outils et API puissantes pour gérer le processus de téléchargement et de téléchargement de fichiers.

Cet article explorera comment utiliser JavaScript pour implémenter les fonctions de téléchargement et de téléchargement de fichiers. Tout d'abord, il présentera l'API de fichier basée sur HTML5, puis utilisera jQuery et XMLHttpRequest pour envoyer des requêtes AJAX afin d'implémenter le téléchargement et le téléchargement de fichiers.

1. API de fichiers HTML5

L'API de fichiers HTML5 permet à JavaScript de lire et d'exploiter des fichiers locaux, y compris le téléchargement. Cette API contient deux objets, File et FileReader, pour résoudre ces problèmes.

1. Objet File

L'objet File représente un fichier local téléchargé via un champ de saisie similaire. Cet objet possède une série de propriétés pour décrire le fichier, telles que le nom du fichier, la taille, le type, etc. Il existe également des méthodes qui peuvent être utilisées pour lire le contenu de ce fichier.

Par exemple :

<input type="file" id="fileInput" />

<script>
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
console.log(file.name)         // 文件名
console.log(file.size)         // 文件大小
console.log(file.type)         // MIME 类型
</script>

2. Objet FileReader

L'objet FileReader peut être utilisé pour lire des fichiers et stocker le contenu du fichier en mémoire pour un traitement ultérieur. Trois événements sont utilisés pour suivre le processus de lecture : onloadstart, onprogress et onload. Par exemple :

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const reader = new FileReader()

reader.onload = function() {
    console.log(reader.result)  // 读取完成后的文件内容
}

reader.readAsText(file)         // 按文本格式读取文件

2. jQuery file upload

jQuery est une bibliothèque JavaScript très puissante qui fournit un grand nombre d'API puissantes, y compris des requêtes AJAX, nous permettant d'utiliser JavaScript pour implémenter des téléchargements de fichiers.

1. Téléchargement de fichier de base

L'implémentation du téléchargement de fichier de base est la suivante :

<!-- HTML 代码 -->
<form enctype="multipart/form-data" id="form">
  <input type="file" name="file" />
  <button type="button" id="upload">上传</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // JavaScript 代码
  $('#upload').click(() => {
    const formData = new FormData($('#form')[0])
    $.ajax({
      url: '/upload',
      type: 'POST',
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

Dans le code ci-dessus, nous définissons d'abord un formulaire HTML, comprenant une zone de saisie de téléchargement de fichier et un bouton de téléchargement. Utilisez ensuite les méthodes ajax de jQuery pour envoyer de manière asynchrone les données du formulaire au backend pour traitement. Lors de l'envoi, nous devons définir processData et contentType sur false pour garantir que l'objet FormData peut être envoyé correctement au serveur sans être stylisé.

2. Afficher la progression du téléchargement

Pour afficher la progression du téléchargement du fichier, nous devons apporter les modifications suivantes :

$('#upload').click(() => {
  const formData = new FormData($('#form')[0])
  $.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
      const xhr = new window.XMLHttpRequest()
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100)
          console.log(percent + '%')
        }
      }, false)
      return xhr
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
})

Dans le code ci-dessus, nous passons la fonction xhr à la méthode ajax, et cette fonction renvoie l'objet XMLHttpRequest . Nous utilisons ensuite la méthode addEventListener pour ajouter un écouteur d'événement de progression, calculer le pourcentage de progression du téléchargement et l'imprimer sur la console.

3. Téléchargement de fichiers XMLHttpRequest

XMLHttpRequest est un objet JavaScript qui peut être utilisé pour créer un client. Il peut obtenir des données du serveur via des requêtes AJAX et peut également être utilisé pour le téléchargement de fichiers.

Ce qui suit est un exemple de téléchargement de fichiers via XMLHttpRequest :

<a href="#" id="download">下载文件</a>
<script>
  $('#download').click(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/download', true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: 'application/octet-stream' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'file.zip'
        link.click()
      }
    }
    xhr.send()
  })
</script>

Dans le code ci-dessus, nous créons un nouvel objet XMLHttpRequest et appelons la méthode open pour ouvrir une requête GET. Nous utilisons l'attribut ResponseType pour indiquer au serveur que le type de réponse attendu est des données binaires, puis lorsque la requête est terminée, nous utilisons l'événement onload pour gérer la réponse, convertir les données binaires de la réponse en un objet Blob et créer un lien pour télécharger. le fichier.

Résumé

Cet article présente principalement comment utiliser JavaScript (y compris l'API File, jQuery et XMLHttpRequest) pour implémenter le processus de téléchargement et de téléchargement de fichiers. Au cours du processus de mise en œuvre, vous devez prêter attention aux problèmes de compatibilité dans diverses circonstances, telles que la compatibilité du navigateur, ainsi que le traitement des données de soumission du formulaire et la manière d'afficher la progression, etc. En les comprenant, nous pouvons mieux gérer nos besoins en matière de téléchargement et de téléchargement de fichiers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!