获取缓存图像的完整文件路径答案

【问题标题】：Get complete filepath for cached images获取缓存图像的完整文件路径
【发布时间】：2013-06-28 22:51:12
【问题描述】：

我已经弄清楚如何预加载图像。我现在想知道的是，是否有任何方法可以使用 Javascript 来获取缓存图像的本地文件路径。

【问题讨论】：

不，这是不可能的。出于好奇，您为什么要这样做？
使用输入上传图像文件，稍后输入值重新填充上传的文件名（服务器上文件的文件路径）和显示在 div 中的图像拇指。在对输入值进行更新后，我需要未更改的输入（仍包含服务器上的文件路径）以填充缓存图像（需要完整的文件路径）。因为我需要本地文件名才能上传。我想使用缓存的图像作为占位符来保持初始图像数组的大小。

【解决方案1】：

您可以结合使用 FileReader 和 sessionStorage。
比如：

var input = document.querySelector("#imageInput");
input.addEventListener("change", function(e){
    var reader = new FileReader();
    reader.onload = function(evt){
        var newImage = document.createElement("img");
        newImage.src = evt.target.result;
        document.querySelector("body").appendChild(newImage);
        sessionStorage.setItem("image", evt.target.result);
    };
    reader.readAsDataURL(e.target.files[0]);
}, false);

window.addEventListener("load", function(e){
    if(sessionStorage.getItem("image")){
        var newImage = document.createElement("img");
        newImage.src = sessionStorage.getItem("image");
        document.querySelector("body").appendChild(newImage);
    }
}, false);

这会将您的所有图像存储在浏览器上，并让它们在帖子和重新加载时保持不变。然后，您可以根据需要添加任何逻辑来编辑它们。

很遗憾，您无法设置“文件”类型的输入，因此您需要做一些 UI 魔术。

【讨论】：

好的。我一直在使用 filereader 来显示要更新的文件的图像。首先，我听说过会话存储。这就是我要找的。非常感谢