Question

如何将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

Answer 1

可以设置 <input type="file"> 的值。

为此，您需要从 blob 和新的 DataTransfer 对象创建 File 对象：

let file = new File([data], "img.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
let container = new DataTransfer();

然后将文件添加到容器，从而填充其“files”属性，该属性可以分配给文件输入的“files”属性：

container.items.add(file);
fileInputElement.files = container.files;

这是带有输出的 fiddle，显示该文件已正确放入输入中。该文件也在表单提交时正确传递到服务器。这至少适用于 Chrome 88。

如果您需要将多个文件传递给输入，您可以多次调用 container.items.add。因此，您可以通过单独跟踪文件并覆盖其“文件”属性来添加文件到输入中，只要此输入仅包含生成的文件（即未由用户选择）。这对于图像预处理、从几个简单的文件生成复杂的文件（例如从多个图像生成 pdf）等很有用。

API 参考：

Answer 2

我在角度应用程序中遇到了一个相似复杂形式的类似问题，因此我只使用XMLHttpRequest()单独发送blob而不是表单。这个特别的＆＃34; blob＆＃34;是在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 3

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

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

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

3 个答案: