獲取緩存圖像的完整文件路徑

Question

我已經想出瞭如何預加載圖像。我現在想知道的是，是否有任何方式使用Javascript來獲取緩存圖像的本地文件路徑。

Answer 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魔術。