Maison > interface Web > js tutoriel > Comment puis-je télécharger des fichiers sur un serveur à l'aide de l'API JavaScript Fetch ?

Comment puis-je télécharger des fichiers sur un serveur à l'aide de l'API JavaScript Fetch ?

Barbara Streisand
Libérer: 2024-11-29 05:34:13
original
654 Les gens l'ont consulté

How Can I Upload Files to a Server Using the JavaScript Fetch API?

Téléchargement de fichiers avec l'API JS Fetch

Le téléchargement de fichiers à l'aide de l'API JS fetch peut être déroutant au début. Après avoir sélectionné le(s) fichier(s) à l'aide d'une entrée de fichier, l'étape suivante consiste à intégrer la méthode fetch() pour envoyer le fichier au serveur.

Pour utiliser l'API fetch pour le téléchargement de fichiers, vous aurez besoin pour construire un objet FormData. Cet objet encapsule à la fois les données du fichier et toutes les données supplémentaires du formulaire que vous souhaitez inclure.

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data
Copier après la connexion

En plus du fichier, vous pouvez ajouter d'autres données au formulaire en utilisant append(), comme illustré dans le code. ci-dessous :

data.append('user', 'hubot'); // Append additional form data
Copier après la connexion

Maintenant, vous pouvez utiliser la méthode fetch() pour envoyer une requête POST au point de terminaison de votre serveur, en transmettant les données du formulaire comme requête. body :

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});
Copier après la connexion

Cette approche vous permet d'envoyer facilement des fichiers et d'autres données à l'aide des fonctionnalités sophistiquées de l'API fetch.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal