时间戳

首页 > 解决方案 > 将输入图像保存在 localStorage 中，然后使用 JS 检索它

javascript - 将输入图像保存在 localStorage 中，然后使用 JS 检索它

问题描述

我正在上传带有其他信息的图像，然后我想将它们一起保存（可能在一个数组中）在 localStorage 中。

如何在输入中检索该图像并将其与仅使用 JS 的其他信息一起保存？我用来上传图片的代码如下（我从另一个 Stackoverflow 问题中得到它，它也可以工作）。

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("food");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

html:

<div class="immagine_cibo">
      <input type="file" onchange="onFileSelected(event)">
      <img id="food" height="200" width="250">
</div>

标签： javascriptarraysfile-uploadlocal-storagesession-storage

解决方案

如果您有“imgtag.src = event.target.result”，则 event.target.result 是一串 base64 编码数据。您可以使用 localStorage.setItem('myPic', event.target.result); 将其保存在本地存储中；

如果要保存数组，则需要先对其进行 json.encode，因为 localStorage 只能保存字符串。

推荐阅读