js发送blob php接收,jquery - javascript如何上传blob？

jquery - javascript如何上传blob？

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

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

size: 655404

type: "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);

});

Yang asked 2019-04-23T04:26:18Z

5个解决方案

93 votes

试试这个

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。

Fabrício Matté answered 2019-04-23T04:26:35Z

14 votes

我无法使用上面的示例来处理blob，我想知道upload.php到底是什么。 所以你走了：

(仅在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);

}

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

?>

yeeking answered 2019-04-23T04:27:28Z

14 votes

您实际上不必使用FormData从JavaScript发送FormData到服务器(并且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

});

Vanilla 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”实现替换传统的HTML多部分表单(即，后端使用多部分表单数据)，则需要使用另一个答案中描述的FormData对象。

来源：XMLHttpRequest2中的新技巧| HTML5 Rocks

Dmitry Pashkevich answered 2019-04-23T04:28:28Z

11 votes

我能够通过不使用FormData但使用javascript对象来传输blob来获得@yeeking示例。 使用使用recorder.js创建的声音blob。 在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);

}

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

?>

Soumen Basak answered 2019-04-23T04:29:03Z

1 votes

我尝试了上面的所有解决方案，此外，还有相关答案。 解决方案包括但不限于手动将blob传递给HTMLInputElement的文件属性，调用FileReader上的所有readAs *方法，使用File实例作为FormData.append调用的第二个参数，尝试通过获取将blob数据作为字符串获取 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增加此值

I Want Answers answered 2019-04-23T04:29:39Z