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

时间:2013-06-28 22:51:12

标签: javascript image caching

我已经想出了如何预加载图像。我现在想要找到的是,是否有任何方法,使用Javascript,获取图像已被缓存的本地文件路径。

1 个答案:

答案 0 :(得分: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魔术。