Как javascript может загрузить большой двоичный объект?

Я не мог заставить приведенный выше пример работать с blobs, и я хотел знать, что именно находится в загрузке.РНР. Так вот вы идете:

(протестирован только в 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);

}

содержимое загрузки.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);
?>

вы на самом деле не должны использовать FormData отправить Blob сервер из JavaScript (и File тоже Blob).

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

ванильный JavaScript пример:

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

конечно, если вы заменяете традиционную HTML-составную форму реализацией "AJAX" (то есть ваш внутренний сервер использует данные составных форм), вы хотите использовать FormData объект, как описано в другой ответ.

источник: новые трюки в Xmlhttprequest2 / HTML5 Rocks

я смог получить пример @yeeking для работы, не используя FormData, но используя объект javascript для передачи большого двоичного объекта. Работает со звуковым блоком, созданным с помощью рекордера.js. Тестировал в 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);
}

содержимое загрузки.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);
?>

Я пробовал все решения выше, и, кроме того, в смежных ответами, а также. Решения, включая, но не ограничиваясь передачей большого двоичного объекта вручную свойству файла HTMLInputElement, вызов всех методов readAs* в FileReader, используя экземпляр файла в качестве второго аргумента для FormData.добавьте вызов, пытаясь получить данные blob в виде строки, получая значения по URL.createObjectURL (myBlob), который оказался противным и разбил мою машину.

теперь, если вам случится попробуйте те или иные и все равно обнаружите, что вы не можете загрузить свой blob, это может означать, что проблема на стороне сервера. В моем случае, мой blob превысил http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize и ограничение post_max_size в PHP.INI таким образом, файл покидал сервер, но был отклонен сервером. Можно увеличить это значение непосредственно в PHP.Ini или через .htaccess