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émentavec un lien de téléchargement de fichier et en simulant un clic.元素，并模拟点击来实现文件下载。

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时，表示文件下载成功。然后，通过创建一个元素，将响应的blob对象转为URL，并将URL赋值给元素的href属性。将文件名设置为'downloaded.txt'。最后，模拟点击元素来触发文件下载。

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