javascript如何上传blob？

Question

javascript如何上传blob？

我在这个结构中有一个blob数据：

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

它实际上是使用最近的Chrome getUerMedia()和Recorder.js记录的声音数据

如何使用jquery的post方法将此blob上传到服务器？我没试过就试过这个：

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

Answer 1

试试这个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's processData和contentTypeto false。

Answer 2

我无法使用上面的示例来处理blob，我想知道upload.php到底是什么。所以你走了：（仅在Chrome 28.0.1500.95中测试过）//&nbsp;javascript&nbsp;function&nbsp;that&nbsp;uploads&nbsp;a&nbsp;blob&nbsp;to&nbsp;upload.phpfunction&nbsp;uploadBlob(){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;blob&nbsp;here&nbsp;for&nbsp;testing &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;blob&nbsp;=&nbsp;new&nbsp;Blob(["i&nbsp;am&nbsp;a&nbsp;blob"]); &nbsp;&nbsp;&nbsp;&nbsp;//var&nbsp;blob&nbsp;=&nbsp;yourAudioBlobCapturedFromWebAudioAPI;//&nbsp;for&nbsp;example&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this&nbsp;function&nbsp;is&nbsp;triggered&nbsp;once&nbsp;a&nbsp;call&nbsp;to&nbsp;readAsDataURL&nbsp;returns &nbsp;&nbsp;&nbsp;&nbsp;reader.onload&nbsp;=&nbsp;function(event){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fd&nbsp;=&nbsp;new&nbsp;FormData(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fd.append('fname',&nbsp;'test.txt'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fd.append('data',&nbsp;event.target.result); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'upload.php', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;fd, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).done(function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;print&nbsp;the&nbsp;output&nbsp;from&nbsp;the&nbsp;upload.php&nbsp;script &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;trigger&nbsp;the&nbsp;read&nbsp;from&nbsp;the&nbsp;reader... &nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(blob);}upload.php的内容：<?//&nbsp;pull&nbsp;the&nbsp;raw&nbsp;binary&nbsp;data&nbsp;from&nbsp;the&nbsp;POST&nbsp;array$data&nbsp;=&nbsp;substr($_POST['data'],&nbsp;strpos($_POST['data'],&nbsp;",")&nbsp;+&nbsp;1);//&nbsp;decode&nbsp;it$decodedData&nbsp;=&nbsp;base64_decode($data);//&nbsp;print&nbsp;out&nbsp;the&nbsp;raw&nbsp;data,&nbsp;echo&nbsp;($decodedData);$filename&nbsp;=&nbsp;"test.txt";//&nbsp;write&nbsp;the&nbsp;data&nbsp;out&nbsp;to&nbsp;the&nbsp;file$fp&nbsp;=&nbsp;fopen($filename,&nbsp;'wb');fwrite($fp,&nbsp;$decodedData);fclose($fp);?>

Answer 3

实际上，您不必使用从JavaScript&nbsp;FormData发送Blob到服务器（File也是a&nbsp;Blob）。jQuery示例：var&nbsp;file&nbsp;=&nbsp;$('#fileInput').get(0).files.item(0);&nbsp;//&nbsp;instance&nbsp;of&nbsp;File$.ajax({ &nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;url:&nbsp;'upload.php', &nbsp;&nbsp;data:&nbsp;file, &nbsp;&nbsp;contentType:&nbsp;'application/my-binary-type',&nbsp;//&nbsp;set&nbsp;accordingly &nbsp;&nbsp;processData:&nbsp;false});Vanilla JavaScript示例：var&nbsp;file&nbsp;=&nbsp;$('#fileInput').get(0).files.item(0);&nbsp;//&nbsp;instance&nbsp;of&nbsp;Filevar&nbsp;xhr&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();xhr.open('POST',&nbsp;'/upload.php',&nbsp;true);xhr.onload&nbsp;=&nbsp;function(e)&nbsp;{&nbsp;...&nbsp;};xhr.send(file);当然，如果您使用“AJAX”实现替换传统的HTML多部分表单（即，您的后端使用多部分表单数据），您希望使用FormData另一个答案中描述的对象。来源：XMLHttpRequest2中的新技巧|&nbsp;HTML5 Rocks