时间戳

首页 > 解决方案 > 如何通过使用唯一名称保存到本地存储来上传图像？

javascript - 如何通过使用唯一名称保存到本地存储来上传图像？

问题描述

我是一个完整的初学者，几天前才开始自学代码，所以如果这不是正确的方法，请随时让我知道你将如何做。

我正在尝试使用 javascript 将多个图像上传到网页上。到目前为止，我已经能够将数据 URL 保存到本地存储，但是每次我选择一个新文件时，保存的 URL 都会被覆盖。然后，当我单击“选择文件”时，所有图像都变得相同。有没有办法用唯一的名称保存数据 URL，而不必每次都在 javascript 中更改它？

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>

  <div>
      <label for="name"></label>
      <input type="file" id="name">
    </div>

</body>

<script src="test.js">
    </script>
</html>

JS：

window.addEventListener('load', function() {
        document.querySelector('input[type="file"]').addEventListener('change', function() {
            if(this.files && this.files[0]) {
                const x = document.querySelector('img'); 
                 x.src = URL.createObjectURL(this.files[0]);
            }
        });
    });


document.querySelector("#name").addEventListener("change", function() {
    const reader = new FileReader();

    reader.addEventListener("load", () => {
        sessionStorage.setItem("recent-image", reader.result);
    });

    reader.readAsDataURL(this.files[0]);
});

document.body.onclick = addElement;

function addElement () { 
  // create a new div element 
  const newDiv = document.createElement('img'); 
  const nameInput = document.querySelector('#name');
  

document.addEventListener("click", () => {
    const recentImageDataURL = sessionStorage.getItem("recent-image");
    if (recentImageDataURL) {
        newDiv.setAttribute("src", recentImageDataURL);
    }
});


  const currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

标签： javascriptimageupload

解决方案

您的session-store -entry 的键始终相同：recent-image.

您需要为每个图像使用不同的唯一键。然后，您需要一种方法来选择要显示的这些键中的哪一个。

（或者，您可以存储包含所有图像的列表或集合，而不是每个键仅一个图像。）

有许多不同的方法可以创建唯一键，因为有许多不同的方法来定义唯一的含义。有很多关于创建唯一键的信息，但这个主题比人们想象的要复杂。准备好大量阅读，或者只是选择一种目前就足够好的简单方法。例如

  • 使用计数器
  • 以毫秒为单位使用当前日期时间
  • 使用随机数
  • 以上的组合

一个简单的解决方案是这样的：

    let recentImageId = '';

    // ...

    //-- a very simple 'unique key' function
    const getUniqueImageId = function(){
        return 'image_' + Date.now();
    }

    // ...

    recentImageId = getUniqueImageId();
    sessionStorage.setItem(recentImageId, reader.result);

    // ...

    const recentImageDataURL = sessionStorage.getItem(recentImageId);

推荐阅读