Utiliser les fonctions JavaScript pour charger et télécharger des fichiers

Utilisez les fonctions JavaScript pour implémenter le téléchargement et le téléchargement de fichiers

Avec le développement et la popularité d'Internet, le téléchargement et le téléchargement de fichiers sont devenus l'une des fonctions courantes dans les applications Web. Cet article explique comment utiliser les fonctions JavaScript pour implémenter les fonctions de téléchargement et de téléchargement de fichiers, et fournit des exemples de code spécifiques.

1. Téléchargement de fichiers

Le téléchargement de fichiers fait référence au téléchargement de fichiers locaux sur le serveur via la page Web. L'API de fichiers est fournie en HTML5 pour gérer la sélection et le téléchargement de fichiers. Nous pouvons utiliser l'objet FileReader dans l'API File pour lire le contenu du fichier et envoyer le fichier au serveur via l'objet XMLHttpRequest.

Ce qui suit est un exemple de code de fonction JavaScript pour implémenter le téléchargement de fichiers :

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('文件上传成功');
    }
  };
  xhr.send(formData);
}

Dans le code ci-dessus, nous obtenons d'abord l'objet DOM de la zone de sélection de fichier, puis supprimons le fichier sélectionné. Ensuite, créez un objet FormData et ajoutez les fichiers sélectionnés au FormData. Créez ensuite un objet XMLHttpRequest et utilisez la méthode open() pour spécifier l'URL de téléchargement et la méthode de requête. Surveillez le changement d'état de XMLHttpRequest via l'événement onreadystatechange. Lorsque l'état est 4 et que le code d'état est 200, cela signifie que le téléchargement du fichier est réussi. Enfin, appelez la méthode send() pour envoyer le FormData au serveur.

2. Téléchargement de fichiers

Le téléchargement de fichiers fait référence au téléchargement de fichiers du serveur vers le local. En JavaScript, vous pouvez télécharger des fichiers en créant un élément <a></a> avec un lien de téléchargement de fichier et en simulant un clic. <a></a>元素，并模拟点击来实现文件下载。

下面是一个实现文件下载的JavaScript函数代码示例：

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.responseType = 'blob';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var blob = xhr.response;
      var link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'file.txt';
      link.click();
    }
  };
  xhr.send();
}

上面的代码中，我们首先创建一个XMLHttpRequest对象，并使用open()方法指定下载的URL和请求方式为GET。设置responseType为'blob'，以便以二进制数据的形式接收文件。通过onreadystatechange事件监听XMLHttpRequest的状态变化，当状态为4且状态码为200时，表示文件下载成功。然后，通过创建一个<a></a>元素，将响应的blob对象转为URL，并将URL赋值给<a></a>元素的href属性。将文件名设置为'downloaded.txt'。最后，模拟点击<a></a>元素来触发文件下载。

综上所述，通过使用JavaScript函数，我们可以方便地实现文件上传和下载的功能。通过File API和XMLHttpRequest对象，我们可以对文件进行读取和发送。通过创建<a></a>

Ce qui suit est un exemple de code de fonction JavaScript pour implémenter le téléchargement de fichiers : 🎜rrreee🎜Dans le code ci-dessus, nous créons d'abord un objet XMLHttpRequest et utilisons la méthode open() pour spécifier l'URL de téléchargement et la méthode de requête comme GET. Définissez ResponseType sur « blob » pour recevoir le fichier sous forme de données binaires. Surveillez le changement d'état de XMLHttpRequest via l'événement onreadystatechange. Lorsque l'état est 4 et que le code d'état est 200, cela signifie que le téléchargement du fichier est réussi. Ensuite, convertissez l'objet blob de réponse en URL en créant un élément <a></a> et attribuez l'URL à l'attribut href de l'élément <a></a>. Définissez le nom du fichier sur « downloaded.txt ». Enfin, simulez un clic sur l'élément <a></a> pour déclencher le téléchargement du fichier. 🎜🎜En résumé, en utilisant les fonctions JavaScript, nous pouvons facilement implémenter des fonctions de téléchargement et de téléchargement de fichiers. Grâce à l'API File et à l'objet XMLHttpRequest, nous pouvons lire et envoyer des fichiers. En créant un élément <a></a> et en simulant un clic, nous pouvons télécharger le fichier. Dans les applications réelles, nous pouvons étendre et optimiser ces fonctions en fonction de besoins spécifiques. 🎜

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!