blocks|key|439159|text|您可以使用FormData+API。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|439160|如果您使用的是jquery.ajax，则需要设置processData:+false和contentType:+false。|style|CODE|439161|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);
});|code-block|syntax|javascript|439162|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData^0|5|C|0|0|7|B|O|I|17|I|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|G]|$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

You can use the <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData" rel="noreferrer">FormData API</a>.
If you're using <code>jquery.ajax</code>, you need to set <code>processData: false</code> and <code>contentType: false</code>.
<pre><code>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);
});
</code></pre>

blocks|key|220962|text|我不能让上面的例子与blobs一起工作，我想知道upload.php中到底是什么。这就是你要做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220963|(仅在Chrome+28.0.1500.95中测试)|220964|//+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);

}|code-block|syntax|javascript|220965|Upload.php的内容：|220966|<?
//+pull+the+raw+binary+data+from+the+POST+array
$data+=+substr($_POST['data'],+strpos($_POST['data'],+",")+%2B+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);
?>|220967|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I could not get the above example to work with blobs and I wanted to know what exactly is in upload.php. So here you go: 

(tested only in Chrome 28.0.1500.95)

<pre><code>// 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);

}
</code></pre>

The contents of upload.php:

<pre><code>&lt;?
// 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);
?&gt;
</code></pre>

blocks|key|220995|text|我不使用FormData而是使用javascript对象来传输blob，从而使@yeeking+example能够工作。适用于使用recorder.js创建的声音斑点。在Chrome版本32.0.1700.107上测试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220996|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);
}|code-block|syntax|javascript|220997|upload.php的内容|220998|<?
//+pull+the+raw+binary+data+from+the+POST+array
$data+=+substr($_POST['data'],+strpos($_POST['data'],+",")+%2B+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);
?>|220999|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I was able to get @yeeking example to work by not using FormData but using javascript object to transfer the blob. Works with a sound blob created using recorder.js. Tested in Chrome version 32.0.1700.107 

<pre><code>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);
}
</code></pre>

Contents of upload.php

<pre><code>&lt;?
// 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);
?&gt;
</code></pre>

blocks|key|439236|text|实际上，您不必使用FormData从JavaScript向服务器发送Blob+(+File也是Blob)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|439237|jQuery示例：|439238|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
});|code-block|syntax|javascript|439239|Vanilla+JavaScript示例：|439240|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);|439241|当然，如果您要用"AJAX“实现替换传统的HTML+multipart表单(即，您的后端使用多部分表单数据)，那么您希望使用另一个答案中描述的FormData对象。|439242|来源：New+Tricks+in+XMLHttpRequest2+%7C+HTML5+Rocks|439243|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob^0|9|8|Y|4|15|4|1B|4|0|0|0|0|0|1Z|8|0|3|17|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|U|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

You actually don't have to use <code>FormData</code> to send a <code>Blob</code> to the server from JavaScript (and a <code>File</code> is also a <code>Blob</code>).

jQuery example:

<pre><code>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
});
</code></pre>

Vanilla JavaScript example:

<pre><code>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);
</code></pre>

Granted, if you are replacing a traditional HTML multipart form with an "AJAX" implementation (that is, your back-end consumes multipart form data), you want to use the <code>FormData</code> object as described in another answer.

Source: <a href="http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob" rel="noreferrer">New Tricks in XMLHttpRequest2 | HTML5 Rocks</a>

blocks|key|439271|text|我尝试了上面所有的解决方案，另外，相关答案中的解决方案也是如此。解决方案包括但不限于手动将blob传递给HTMLInputElement的文件属性，调用FileReader上的所有readAs*方法，使用file实例作为FormData.append调用的第二个参数，尝试通过获取URL.createObjectURL(myBlob)的值来获取blob数据，这会导致麻烦并使我的机器崩溃。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|439272|现在，如果你碰巧尝试了这些或更多，仍然发现你无法上传你的blob，这可能意味着问题出在服务器端。在我的例子中，我的blob超过了PHP.INI中的http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize和post_max_size限制，所以文件离开了前端表单，但被服务器拒绝了。您可以直接在PHP.INI中或通过.htaccess增加此值|offset|length|439273|entityMap|0|LINK|mutability|MUTABLE|url|http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize^0|0|21|1T|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I tried all the solutions above and in addition, those in related answers as well. Solutions including but not limited to passing the blob manually to a HTMLInputElement's file property, calling all the readAs* methods on FileReader, using a File instance as second argument for a FormData.append call, trying to get the blob data as a string by getting the values at URL.createObjectURL(myBlob) which turned out nasty and crashed my machine.

Now, if you happen to attempt those or more and still find you're unable to upload your blob, it could mean the problem is server-side. In my case, my blob exceeded the <a href="http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize" rel="nofollow noreferrer">http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize</a> and post_max_size limit in PHP.INI so the file was leaving the front end form but getting rejected by the server. You could either increase this value directly in PHP.INI or via .htaccess

I have a blob data in this structure:

<pre><code>Blob {type: "audio/wav", size: 655404, slice: function}
size: 655404
type: "audio/wav"
__proto__: Blob
</code></pre>

It's actually sound data recorded using the recent Chrome <code>getUerMedia()</code> and <a href="https://github.com/mattdiamond/Recorderjs" rel="noreferrer">Recorder.js</a>

How can I upload this blob to the server using jquery's post method? I've tried this without any luck:

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

How can javascript upload a blob?

服务器

jQuery

我在这个结构中有一个blob数据：Blob {type: "audio/wav", size: 655404, slice: function}size: 655404type: "audio/wav"__proto__: Blob它实际上是使用最新的Chrome getUerMedia()和录制的声音数据如何使用jq...

问javascript如何上传blob？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript如何上传blob？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript如何上传blob？
EN