einen Klecks auf einen Eingang vom Typ Datei in einem Formular anhängen

Question

Wie

// Input of type file 
<input type="file" name="uploadedFile" id="uploadedFile" accept="image/*"><br> 

// I am getting image from webcam and converting it to a blob 
function takepicture() { 
    canvas.width = width; 
    canvas.height = height; 
    canvas.getContext('2d').drawImage(video, 0, 1, width, height); 
    var data = canvas.toDataURL('image/png'); 
    var dataURL = canvas.toDataURL(); 
    var blob = dataURItoBlob(dataURL); 
    photo.setAttribute('src', data); 
} 

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
     return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
    } 

    // How can I append this var blob to "uploadedFile". I want to add this on form submit 

Answer 1

Ich hatte ein ähnliches Problem mit einer ziemlich komplexen Form in einem Winkel app, so schickte ich an Stelle der Form nur die blob einzeln XMLHttpRequest() verwenden. Dieser spezielle "Blob" wurde in einem WebAudioAPI Kontext erstellt und erstellt eine Audiospur im Browser des Benutzers.

var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'someURLForTheUpload', true); //my url had the ID of the item that the blob corresponded to 
xhr.responseType = 'Blob'; 
xhr.setRequestHeader("x-csrf-token",csrf); //if you are doing CSRF stuff 
xhr.onload = function(e) { /*irrelevant code*/ }; 
xhr.send(blob); 

Answer 2

Sie können nicht ändern, um die file Eingang Blob Eingabe vom Typ Datei anhängen Sie können jedoch einen hidden Eingang verwenden Daten weitergeben. Bsp .:

var hidden_elem = document.getElementById("hidden"); 
hidden_elem.value = blob;