javascript - 如何获取输入类型=图像的值并将其显示在图像上？

Question

我正在寻找一个示例，其中 <input type="file"> 的值可以存储到一个变量中，然后从那里存储到 localStorage所以刷新页面时它不会丢失，而且我找不到我正在寻找的解决方案。

function myFunction() {

  //Get value of input type file
  let userInput = document.getElementById("uploadImage").value;

  //Store value into LocalStorage
  localStorage.setItem("image", JSON.stringify(userInput))
}

// Display "image" in Local storage as src of img preview even after page refreshes
document.getElementById("imagePreview").setAttribute("src", JSON.parse(localStorage.getItem("image")))

img {
  max-width: 300px;
}

<input type="file" accept="image/*" id="uploadImage">
<br>
<button onclick="myFunction()">
  Submit Picture
</button>
<br>
<img id="imagePreview">

总结一下，我想知道如何将输入值保存到变量中，然后将变量保存到本地存储中。最后，将localStorage 显示在图像标签中，以便在页面刷新时不会丢失。如果您有任何问题，请告诉我，因为我知道这可能有点令人困惑。这是一个 jsFiddle，如下所示: https://jsfiddle.net/vedt_/zrvuwbj7/44/#&togetherjs=gbLynsQ627如果您知道如何操作，请随时对其进行编辑。

Answer 1

您可以将图像转换为 base64并将其存储如下:

function myFunction() {
     const file = document.querySelector('#uploadImage').files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function () {
     localStorage.setItem("image", reader.result);
     document.getElementById("imagePreview").setAttribute("src", localStorage.getItem("image"))
     };
}
if(localStorage.getItem("image"))
     document.getElementById("imagePreview").setAttribute("src", localStorage.getItem("image"))

img {
	max-width: 300px;
}

<input type="file" accept="image/*" id="uploadImage"><br>
<button onclick="myFunction()">Submit Picture</button><br>
<img id="imagePreview">