Maison > interface Web > js tutoriel > le corps du texte

Comment télécharger un blob en JavaScript ?

Barbara Streisand
Libérer: 2024-11-06 06:08:02
original
970 Les gens l'ont consulté

How do I Upload a Blob in JavaScript?

Téléchargement de blobs avec JavaScript

Lorsque vous traitez des données audio ou autres données multimédias en JavaScript, il est courant de rencontrer des blobs, qui sont des collections immuables de données brutes. Pour stocker ou traiter efficacement ces données, vous devrez peut-être les télécharger sur un serveur. Voici un guide détaillé sur la façon de télécharger un blob à l'aide de JavaScript :

Utilisation de FormData

L'une des méthodes les plus simples pour télécharger un blob consiste à utiliser l'API FormData. Il s'agit d'une API standardisée qui permet de créer une requête HTTP avec une charge utile contenant à la fois des données de formulaire régulières et des données binaires, telles que des blobs.

Implémentation de jQuery.ajax

Pour télécharger un blob à l'aide de jQuery.ajax, suivez ces étapes :

  1. Créez un nouvel objet FormData :
var fd = new FormData();
Copier après la connexion
  1. Ajoutez à la fois le nom du fichier et le blob à l'objet FormData :
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);
Copier après la connexion
  1. Définissez les options processData et contentType de l'appel jQuery.ajax sur false :
$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});
Copier après la connexion

Par en définissant processData sur false, nous empêchons jQuery de convertir l'objet FormData en chaîne, ce qui est nécessaire pour les données binaires comme les blobs. De même, définir contentType sur false permet au navigateur de déterminer le type de contenu approprié pour le téléchargement.

Implémentation personnalisée

Si vous préférez créer un objet XHR (XMLHttpRequest) manuellement, vous pouvez suivre les étapes suivantes :

  1. Initialiser un nouvel objet XMLHttpRequest :
var xhr = new XMLHttpRequest();
Copier après la connexion
  1. Définir la méthode, l'URL et les en-têtes de requête :
xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');
Copier après la connexion
  1. Créez un objet FormData et ajoutez les données :
var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);
Copier après la connexion
  1. Envoyez le FormData comme corps de la requête :
xhr.send(fd);
Copier après la connexion
  1. Gérer la réponse du serveur dans l'événement onload :
xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};
Copier après la connexion

En suivant ces étapes, vous pouvez télécharger efficacement des blobs sur un serveur à l'aide de JavaScript, vous permettant ainsi pour traiter et stocker efficacement les données multimédias.

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