¿Cómo puede JavaScript cargar un blob?
Tengo un blob de datos en esta estructura:
Blob {type: "audio/wav", size: 655404, slice: function}
size: 655404
type: "audio/wav"
__proto__: Blob
En realidad, son datos de sonido grabados con Chrome getUerMedia()y Recorder.js recientes.
¿Cómo puedo cargar este blob en el servidor usando el método de publicación de jquery? Probé esto sin suerte:
$.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob },
function(responseText) {
console.log(responseText);
});
Puede utilizar la API FormData .
Si estás usando jquery.ajax, necesitas configurar processData: falsey contentType: false.
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);
});
Actualización 2019
Esto actualiza las respuestas con la última API Fetch y no necesita jQuery.
Descargo de responsabilidad: no funciona en IE, Opera Mini y navegadores más antiguos. Ver canius .
Búsqueda básica
Podría ser tan simple como:
fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
.then(response => console.log(response.text()))
Recuperar con manejo de errores
Después de agregar el manejo de errores, podría verse así:
fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
.then(response => {
if (response.ok) return response;
else throw Error(`Server returned ${response.status}: ${response.statusText}`)
})
.then(response => console.log(response.text()))
.catch(err => {
alert(err);
});
Código PHP
Este es el código del lado del servidor en upload.php.
<?php
// gets entire POST body
$data = file_get_contents('php://input');
// write the data out to the file
$fp = fopen("path/to/file", "wb");
fwrite($fp, $data);
fclose($fp);
?>
En realidad, no es necesario utilizarlo FormDatapara enviar un Blobal servidor desde JavaScript (y a Filetambién es un Blob).
Ejemplo de 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
});
Ejemplo de JavaScript básico:
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);
Por supuesto, si está reemplazando un formulario HTML tradicional de varias partes con una implementación "AJAX" (es decir, su back-end consume datos de formulario de varias partes), desea usar el FormDataobjeto como se describe en otra respuesta.
Fuente: Nuevos trucos en XMLHttpRequest2 | Rocas HTML5
