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

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

有可能set的价值<input type="file">.

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

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 https://jsfiddle.net/Kartearis/gmhwnaz6/3/输出显示该文件已正确放入输入中。 该文件也会在表单提交时正确传递到服务器。这至少可以在 Chrome 88 上运行。

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

API参考：

• 文件对象 https://developer.mozilla.org/en-US/docs/Web/API/File
• 数据传输对象 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer