PHP + JS: Come fare i file di riproduzione in formato HTML come Multipart Content-Type (via JS)?

  1. Avere un module HTML che viene inviato via POST (utente facendo clic sul button di invio).

  2. Inoltre avendo un'image legata tramite Javascript di un object canvas (getImageData ()).

Domanda:

Come "iniettare" questi dati dell'image nel module HTML, in modo da essere caricato come Content-Type: multipart / form-data e può essere elaborato tramite la logica esistente PHP Frameworks Data Extraction?

Esempio da un file <input type="file" catturato con CHrome in una richiesta POST => dovrebbe essere simile a questo

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

Problema: so come metterlo in una richiesta separata (via ajax, separata dalla forma). So come caricarlo come base64 Dati e un process manualmente nella forma.

Ma non so come submit i dati di image lungo il module che esce in modo che cerca lo script di PHP Serverside esattamente lo stesso di un'image che viene inviata tramite <input type="file"...

Motivo: Symphony (FileUpload Object) controlla se un file viene caricato tramite il module POST e non riesce se installa manualmente l'object con i dati.
Quindi la soluzione migliore sarebbe (per quanto riguarda molte altre cose, come il test, evitando logiche inutili), se i dati verrebbero passati come un normale caricamento di moduli. Come fare questo?

Grazie!

È ansible utilizzare un object FormData per get i valori del module e quindi aggiungere una versione blob della tua canvas in FormData.

Questo blob verrà visto come un file dal server.

Purtroppo, tutti i browser non supportno ancora il metodo native canvas.toBlob() e neppure valgono, tutte le implementazioni non sono le stesse.
Tutti i principali browser supportno ora il metodo toBlob e si può trovare un polyfill su mdn per i browser più vecchi.

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

Il lato PHP sarebbe allora:

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