Comment télécharger des objets Blob sur un serveur à l'aide de JavaScript et jQuery ?

Télécharger des objets blob avec JavaScript

Dans cet article, nous allons explorer comment télécharger un objet blob, tel que des données audio enregistrées à l'aide de Chrome. getUserMedia() et Recorder.js, vers un serveur utilisant JavaScript.

Problème :

Nous avons un objet blob avec des données sonores, mais nous avons besoin d'aide pour le télécharger sur un serveur à l'aide de la méthode de publication de jQuery.

Solution :

Pour télécharger un blob, nous pouvons utiliser l'API FormData. Cette approche est nécessaire car la méthode post de jQuery attend des données de formulaire.

Implémentation de jQuery :

1. Créez un nouvel objet FormData.
2. Ajouter un blob données au FormData en utilisant fd.append('data', soundBlob).
3. Définissez processData et contentType sur false dans les paramètres jQuery.ajax pour empêcher jQuery de traiter automatiquement les données du formulaire. Cela nous permet de télécharger les données brutes du blob.
4. Envoyez l'objet FormData au serveur à l'aide de jQuery.ajax.

Exemple de code :

<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>

En suivant ces étapes, vous pouvez réussir à télécharger des données blob sur un serveur à l'aide de JavaScript et jQuery.

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!