Comment javascript peut-il Télécharger un blob?

Je n'ai pas pu obtenir l'exemple ci-dessus pour travailler avec des blobs et je voulais savoir ce qui est exactement en téléchargement.php. Donc, ici, vous allez:

(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 du téléchargement.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);
?>

Vous n'avez pas besoin d'utiliser FormData pour envoyer un Blob au serveur à partir de JavaScript (et un File est aussi 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 HTML multipart traditionnel par une implémentation" AJAX " (c'est-à-dire que votre back-end consomme des données de formulaire multipart), vous souhaitez utiliser l'objet FormData comme décrit dans une autre réponse.

Source: Nouvelles astuces dans XMLHttpRequest2 | HTML5 Roches

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

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 du téléchargement.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);
?>

J'ai essayé toutes les solutions ci-dessus et en plus, celles des réponses connexes. Solutions comprenant, mais sans s'y limiter, la transmission manuelle du blob à la propriété file D'un HTMLInputElement, en appelant toutes les méthodes readAs* sur FileReader, en utilisant une instance de fichier comme deuxième argument pour un FormData.ajouter un appel, en essayant d'obtenir les données blob sous forme de chaîne en obtenant les valeurs à L'URL.createObjectURL (myBlob) qui s'est avéré méchant et a écrasé ma machine.

Maintenant, si vous essayez ces ou plus et trouvez toujours que vous ne pouvez pas télécharger votre blob, cela pourrait signifier que le problème est Côté Serveur. Dans mon cas, mon blob A dépassé le http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize et post_max_size limite en PHP.INI donc le fichier quittait le serveur mais était rejeté par le serveur. Vous pouvez soit augmenter cette valeur directement en PHP.INI ou via .htaccess