如何将图像设置为输入文件字段

Question

我有以下输入：

<input type="file" asp-for="ScreenShotImage" id="offer-client-image"/>   

该应用程序正在从div计算器生成屏幕截图图像，我想将该图像设置为id＝"；提供客户形象"；输入当用户提交表单时，图像也会被上传。

我试过这样做，但不起作用：

document.getElementById("offer-client-image").file = document.getElementById('canvas').toDataURL()

感谢您的帮助！

Answer 1

我不认为使用实际的文件输入是相关的，因为用户不必选择任何内容。

也许你可以这样处理：

const form = document.getElementById("the_form")
const cvs = document.getElementById("the_canvas")
form.onsubmit = function(e) {
e.preventDefault()
const data = new FormData(form)
cvs.toBlob(img_blob => {
data.append("img_file", img_blob)
// send your form
fetch("https://example.com/post_url", {
method: "POST",
body: data
});
})
}

<form id="the_form">
<input type="submit" />
</form>
<canvas id="the_canvas"></canvas>