将blob附加到表单中类型file的输入

如何将blob附加到类型文件的输入

// Input of type file 
 

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

我在角度应用程序中有一个相当复杂的表单类似的问题，因此我只是使用XMLHttpRequest()单独发送blob而不是表单。 这个特殊的“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); 

Answer 2

您无法更改file输入，但可以使用hidden输入来传递数据。 例：

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