HTML和JS - 從客戶端本地路徑，而不是服務器路徑負載資源

Question

這是我的問題的情景：我有一個網頁，顯示通過量的jQuery DOM注入一些圖像，就像這樣：

<!-- this is inside an html page --> 
<img id="img1" src="#" /> 
<img id="img2" src="#" /> 
<img id="img3" src="#" /> 

和這是腳本的一個例子，我用它來加載圖像

$("#img1").attr("src", "/img/image1.jpg"); 
$("#img2").attr("src", "/img/image2.jpg"); 
$("#img3").attr("src", "/img/image3.jpg"); 

所以對於圖像的完整路徑是www.mywebsite.abc/img/someImage.jpg

什麼，我需要做的，是找到一個方法o切換圖像源路徑，並強制頁面從本地（客戶端）路徑加載它們，例如c：\ something \ img。

img文件夾結構對於服務器和客戶端都是一樣的，所以基本上我認爲瀏覽器只是從服務器「切換」到客戶端，從客戶端文件夾中取代服務器的圖像一旦他需要他們，他就會立刻離開。

你認爲有可能做這樣的事情嗎？

如果您需要更多說明，請提前致謝您的任何建議/答覆。

最好的問候，再次感謝

Answer 1

一般來說，沒有，你不能那樣做。瀏覽器的安全功能不會讓您的頁面訪問文件系統上的文件。但是，如果您在控制客戶端計算機的某個有限範圍內使用它，則可以使用命令行開關來禁用該安全性。

例如，你可以用--allow-file-access推出Chrome瀏覽器，然後做

$("#img3").attr("src", "file://c/something/img/image3.jpg"); 

我不會推薦它，但是，顯然一般的用戶不會被啓動Chrome的方式。

Answer 2

我想不出你爲什麼要做到這一點，但嘗試

$("#img1").attr("src", "file:///img/image1.jpg"); 

或

$("#img1").attr("src", "file://img/image1.jpg"); 

它可能工作

Answer 3

你不應該在普通的網頁/應用程序中需要這個。如果你想要的是備用網絡流量，那麼你可以從服務器提供正確的緩存頭文件。 然後，在第一個請求之後，客戶端的瀏覽器將從緩存（文件系統）檢索文件，甚至不會打擾您的Web服務器。

有關HTTP緩存的全面教程，請參閱http://www.mnot.net/cache_docs/。

做你的建議是有點模糊，瀏覽器很可能會阻止。即使他們沒有，你也不會知道客戶端可能擁有的文件系統。 始終以最客戶不可知的方式開發您的網頁/應用程序。

在此之後，如果您仍然因爲某些原因想要這樣做，那麼其他答案可能會指向「正確」方向。

編輯：

還有另一種可能性。 HTML5有可能離線網絡應用程序。基本上，您可以提供要脫機使用的資源列表（清單）。即使用戶不需要該特定文件（用戶不需要訪問網站的每個角落），任何支持HTML5 Offline的瀏覽器都將解析此列表並下載並緩存其中列出的文件。在線時，瀏覽器會自動保留這些文件的最新副本。

我想這可能是你要找的。

有關更多信息和兼容瀏覽器列表，請參閱http://diveintohtml5.info/offline.html。