Прикрепите blob к вводу файла типа в форме

Как добавить блоб на ввод файла типа?

<!-- 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

Ответ 1

У меня была аналогичная проблема с довольно сложной формой в приложении angular, поэтому вместо формы я просто отправил blob индивидуально, используя XMLHttpRequest(). Этот конкретный "blob" был создан в контексте WebAudioAPI, создавая звуковую дорожку в пользовательском браузере.

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

Ответ 2

Вы не можете изменить ввод file, но вы можете использовать вход hidden для передачи данных. например:.

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