Comment javascript peut-il télécharger un objet blob?

J'ai des données blob dans cette structure:

Blob {type: "audio/wav", size: 655404, slice: function}
size: 655404
type: "audio/wav"
__proto__: Blob

Ce sont en fait des données sonores enregistrées à l'aide des récents Chrome getUerMedia()et Recorder.js

Comment puis-je télécharger cet objet blob sur le serveur à l'aide de la méthode de publication de jquery? J'ai essayé ceci sans aucune chance:

   $.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob }, 
    function(responseText) {
           console.log(responseText);
    });

Essaye ça

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

Vous devez utiliser l' API FormData et définir le jQuery.ajax's processDataet contentTypesur false.

En fait, vous n'avez pas à utiliser FormDatapour envoyer un Blobau serveur à partir de JavaScript (et a Fileest également un Blob).

Exemple jQuery:

var file = $('#fileInput').get(0).files.item(0); // instance of File
$.ajax({
  type: 'POST',
  url: 'upload.php',
  data: file,
  contentType: 'application/my-binary-type', // set accordingly
  processData: false
});

Exemple JavaScript vanille:

var file = $('#fileInput').get(0).files.item(0); // instance of File
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php', true);
xhr.onload = function(e) { ... };
xhr.send(file);

Certes, si vous remplacez un formulaire en plusieurs parties HTML traditionnel par une implémentation «AJAX» (c'est-à-dire que votre back-end consomme des données de formulaire en plusieurs parties), vous souhaitez utiliser l' FormDataobjet comme décrit dans une autre réponse.

Source: Nouvelles astuces dans XMLHttpRequest2 | Roches HTML5

Je n'ai pas pu faire fonctionner l'exemple ci-dessus avec des blobs et je voulais savoir ce qu'il y avait exactement dans upload.php. Alors voilà:

(testé uniquement dans Chrome 28.0.1500.95)

// javascript function that uploads a blob to upload.php
function uploadBlob(){
    // create a blob here for testing
    var blob = new Blob(["i am a blob"]);
    //var blob = yourAudioBlobCapturedFromWebAudioAPI;// for example   
    var reader = new FileReader();
    // this function is triggered once a call to readAsDataURL returns
    reader.onload = function(event){
        var fd = new FormData();
        fd.append('fname', 'test.txt');
        fd.append('data', event.target.result);
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            // print the output from the upload.php script
            console.log(data);
        });
    };      
    // trigger the read from the reader...
    reader.readAsDataURL(blob);

}

Le contenu de upload.php:

<?
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data, 
echo ($decodedData);
$filename = "test.txt";
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

J'ai pu faire fonctionner l'exemple @yeeking en n'utilisant pas FormData mais en utilisant un objet javascript pour transférer le blob. Fonctionne avec un blob sonore créé à l'aide de recorder.js. Testé dans la version 32.0.1700.107 de Chrome

function uploadAudio( blob ) {
  var reader = new FileReader();
  reader.onload = function(event){
    var fd = {};
    fd["fname"] = "test.wav";
    fd["data"] = event.target.result;
    $.ajax({
      type: 'POST',
      url: 'upload.php',
      data: fd,
      dataType: 'text'
    }).done(function(data) {
        console.log(data);
    });
  };
  reader.readAsDataURL(blob);
}

Contenu de upload.php

<?
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
$filename = $_POST['fname'];
echo $filename;
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

Mise à jour 2019

Cela met à jour les réponses avec la dernière API Fetch et n'a pas besoin de jQuery.

Avertissement: ne fonctionne pas sur IE, Opera Mini et les anciens navigateurs. Voir caniuse .

Récupération de base

Cela pourrait être aussi simple que:

  fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
                .then(response => console.log(response.text()))

Récupérer avec gestion des erreurs

Après avoir ajouté la gestion des erreurs, cela pourrait ressembler à:

fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
            .then(response => {
                if (response.ok) return response;
                else throw Error(`Server returned ${response.status}: ${response.statusText}`)
            })
            .then(response => console.log(response.text()))
            .catch(err => {
                alert(err);
            });

Code PHP

Il s'agit du code côté serveur dans upload.php.

<?php    
    // gets entire POST body
    $data = file_get_contents('php://input');
    // write the data out to the file
    $fp = fopen("path/to/file", "wb");

    fwrite($fp, $data);
    fclose($fp);
?>

J'ai essayé toutes les solutions ci-dessus et en plus, celles des réponses connexes. Solutions incluant, mais sans s'y limiter, le passage manuel de l'objet blob à la propriété file d'un HTMLInputElement, l'appel de toutes les méthodes readAs * sur FileReader, l'utilisation d'une instance File comme deuxième argument pour un appel FormData.append, en essayant d'obtenir les données blob sous forme de chaîne en obtenant les valeurs de URL.createObjectURL (myBlob) qui se sont avérées désagréables et ont planté ma machine.

Maintenant, si vous essayez de les essayer ou plus et que vous ne parvenez toujours pas à télécharger votre blob, cela peut signifier que le problème est côté serveur. Dans mon cas, mon blob a dépassé la limite http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize et post_max_size dans PHP.INI, le fichier quittait donc le front-end forme mais rejetée par le serveur. Vous pouvez augmenter cette valeur directement dans PHP.INI ou via .htaccess