javascript - PHP+JS: ¿Cómo hacer Fileuploads en formato HTML como Content-Type Multipart(via JS)?

post html5-canvas

Question

1. Tener un formulario HTML que se envía a través de POST (el usuario hace clic en el botón Enviar).

2. Además, tener una imagen que se lee a través de Javascript de un objeto de lienzo (getImageData ()).

Pregunta:

¿Cómo "inyectar" estos datos de imagen en el formulario HTML, para que se cargue como Content-Type: multipart / form-data y pueda procesarse a través de la lógica de extracción de datos PHP Frameworks existente?

Ejemplo de una carga <input type="file" capturada con CHrome en una solicitud POST => debería verse así

------WebKitFormBoundaryBBAQ5B4Ax1NgxFmD
Content-Disposition: form-data; name="images"; filename="fooimage.png"
Content-Type: image/png

Problema: Sé cómo subirlo en una solicitud separada (a través de ajax, separada del formulario). Sé cómo cargarlo como datos base64 y procesarlo manualmente en el formulario.

Pero no sé cómo enviar los datos de imagen a lo largo del formulario existente para que busque los scripts del servidor PHP exactamente igual que una imagen que se envía a través de <input type="file"...

Motivo: Symphony (FileUpload Object) comprueba si un archivo se carga a través del formulario POST y falla si instalo manualmente el objeto con los datos.
Entonces, la mejor solución sería (en lo que respecta a muchas otras cosas, como probar, evitar logik innecesarios), si los datos se pasaran de la misma manera que una carga de formulario normal. ¿Como hacer esto?

¡Gracias!

Answer 1

Puede usar un objeto FormData para obtener los valores de su formulario y luego agregar una versión de blob de su lienzo en FormData.

Este blob será visto como un archivo por el servidor.

Desafortunadamente, todos los navegadores aún no son compatibles con el canvas.toBlob() nativo canvas.toBlob() , e incluso vale la pena, todas las implementations no son iguales.
Todos los principales navegadores ahora admiten el método toBlob, y puede encontrar un polyfill en mdn para navegadores más antiguos.

// the function to create and send our FormData
var send = function(form, url, canvas, filename, type, quality, callback) {

  canvas.toBlob(function(blob){
    var formData = form ? new FormData(form) : new FormData();
    formData.append(''file'', blob, filename);

    var xhr = new XMLHttpRequest();
    xhr.onload = callback;
    xhr.open(''POST'', url);
    xhr.send(formData);

    }, type, quality);
};

// How to use it //

var form = document.querySelector(''form''),   // the form to construct the FormData, can be null or undefined to send only the image
  url = ''http://example.com/upload.php'',     // required, the url where we''ll send it
  canvas = document.querySelector(''canvas''), // required, the canvas to send
  filename = (new Date()).getTime() + ''.jpg'',// required, a filename
  type = ''image/jpeg'',                       // optional, the algorithm to encode the canvas. If omitted defaults to ''image/png''
  quality = .5,                              // optional, if the type is set to jpeg, 0-1 parameter that sets the quality of the encoding
  callback = function(e) {console.log(this.response);}; // optional, a callback once the xhr finished

send(form, url, canvas, filename, type, quality, callback);

El lado PHP sería entonces:

if ( isset( $_FILES["file"] ) ){
    $dir = ''some/dir/'';
    $blob = file_get_contents($_FILES["file"][''tmp_name'']);
    file_put_contents($dir.$_FILES["file"]["name"], $blob);
    }