Comment télécharger des blobs sur un serveur à l'aide de jQuery et FormData ?

Téléchargement de blobs à l'aide de JavaScript

Lors du traitement de données multimédia dans des applications Web, telles que l'audio ou la vidéo, il devient souvent nécessaire de télécharger ces fichiers à un serveur distant. En JavaScript, il existe plusieurs méthodes pour accomplir cette tâche.

Une approche courante consiste à utiliser la méthode $.post() de jQuery. Cependant, lorsque vous travaillez avec des Blobs, certaines modifications sont nécessaires pour réussir à télécharger les données.

Solution utilisant l'API FormData

Pour télécharger un Blob à l'aide de jQuery, il est nécessaire de utilisez l'API FormData. Cette API fournit un mécanisme pour construire des données de formulaire et joindre des données supplémentaires, telles que des Blobs, à la requête.

Voici comment utiliser l'API FormData avec la méthode $.post() de jQuery pour télécharger un Blob :

<code class="javascript">var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});</code>

Dans ce code :

1. Un objet FormData (fd) est créé.
2. Les clés 'fname' et 'data' sont ajoutées au formulaire données. 'fname' représente le nom de fichier souhaité sur le serveur, tandis que 'data' contient le son Blob.
3. La méthode $.ajax() de jQuery est utilisée pour exécuter la requête.
4. Les processData et contentType les options sont définies sur false. Ceci est important car $.ajax() transforme automatiquement les données du formulaire en une chaîne de requête, ce qui ne convient pas aux Blobs.

En utilisant l'API FormData et en omettant le comportement de traitement par défaut de $.ajax (), ce code télécharge avec succès le Blob sur le serveur.

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!