Comment télécharger un blob en 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();

2. Ajoutez à la fois le nom du fichier et le blob à l'objet FormData :

fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

3. 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);
});

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();

2. 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');

3. Créez un objet FormData et ajoutez les données :

var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

4. Envoyez le FormData comme corps de la requête :

xhr.send(fd);

5. Gérer la réponse du serveur dans l'événement onload :

xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};

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!