Can I send a BLOB to an input file from Javascript?

Question

Can I send a BLOB to an input file from Javascript?

Navigation

#1 by (1 votes)

1

I have a website where you record a video, and what you do is create a BLOB and then send it to a URL server with URL.createObjectURL() . But I need to save that BLOB in MySQL , so I tried to send the BLOB to input of type file and then when I call it of < em> PHP remove it from there.

Code:

function makeLink()
{
    let blob = new Blob(chunks, {type: media.type })
    , url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a')
    ,contenedor=document.createElement('input')

   li.setAttribute("id","li");
   contenedor.setAttribute("id","video2");
   contenedor.setAttribute("name","video2");
   contenedor.setAttribute("type","file");
   contenedor.setAttribute("value",chunks);

   mt.controls = true;
   mt.src = url;
   hf.href = url; 
}

javascript blob

asked by Camol 07.05.2017 в 05:17

source

1 answer

Compatibility with Safari on Ipad and Iphone Connect Mysql with vb6

score 1 · Accepted Answer

Since you already have the data contained in a Blob you do not need to use a field type file <input type="file"> to send it, you can do it in a hidden field <input type="hidden"> , to do it you must use the Web API FileReader () .

Below is an example of the modifications you must make to your code:

function makeLink()
{
    let blob = new Blob(chunks, {type: media.type })
    , url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a')
    , contenedor=document.createElement('input')

   li.setAttribute("id","li");
   contenedor.setAttribute("id","video2");
   contenedor.setAttribute("name","video2");
   contenedor.setAttribute("type","hidden");

   // Creamos la instancia -> Web API FileReader()
   var reader = new FileReader();

   // Definimos el Evento onload()
   reader.onload = function(e) {

     // convertimos el resultado de la carga a base64
     // para poder transportar los datos al Servidor
     var fileInBase64 = btoa(e.target.result);

     // Cargamos el Resultado al contenedor del Formulario
     contenedor.setAttribute("value", fileInBase64);
   };

   // Ahora comenzamos a leer el contenido del Blob
   // y lo pasamos en formato binario
   reader.readAsBinaryString(blob);

   mt.controls = true;
   mt.src = url;
   hf.href = url; 
}