如何可以上传一个blob的JavaScript？
我在这个结构中有一个blob数据：
Blob {type: "audio/wav", size: 655404, slice: function} size: 655404 type: "audio/wav" __proto__: Blob 这实际上是使用最近的Chrome getUerMedia()和Recorder.jslogging的声音数据
我怎样才能上传这个blob到服务器使用jquery的post方法？ 我试过这个没有任何运气：
$.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob }, function(responseText) { console.log(responseText); });
尝试这个
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); });
您需要使用FormData API ，并将jQuery.ajax的processData和contentType为false 。
我无法得到上面的例子与blob工作，我想知道什么是在upload.php。 所以在这里你去：
（仅在Chrome 28.0.1500.95中testing）
// 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); }
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); ?>
你实际上不必使用FormData从JavaScript发送一个Blob到服务器（而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);
当然，如果用“AJAX”实现（也就是说，后端使用多部分表单数据）replace传统的HTML多部分表单，则需要使用另一个答案中所述的FormData对象。
来源： XMLHttpRequest2中的新技巧 HTML5岩石
我能够通过不使用FormData，而是使用JavaScript对象来传输blob，从而获得@yeeking示例。 与使用recorder.js创build的声音blob一起使用。 在Chrome版本32.0.1700.107中testing
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); }
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); ?>
我尝试了上面的所有解决scheme，另外还有相关的解答。 解决scheme包括但不限于手动将blob传递给HTMLInputElement的文件属性，调用FileReader上的所有readAs *方法，使用File实例作为FormData.append调用的第二个参数，尝试通过获取blob数据作为string在URL.createObjectURL（myBlob）的结果是讨厌和崩溃我的机器的值。
现在，如果你碰巧尝试这些或更多，但仍然发现你无法上传你的blob，这可能意味着问题是服务器端。 在我的情况下，我的BLOB超过了PHP.INI中的http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize和post_max_size限制，所以文件离开了服务器，被服务器拒绝。; 您可以直接在PHP.INI中或通过.htaccess增加此值
