IE瀏覽器上傳檔案時本地路徑變成”C:\fakepath\”的問題

在使用<input id="file_upl" type="file" />控制項上傳檔案時，有時會需要擷取檔案本地路徑展示給客戶，這時可以通過這樣的方式擷取檔案本地路徑：

document.getElementById('file_upl').value

這在IE7及以前的IE瀏覽器版本上都沒有問題，但是到IE8上面，就不行了，在IE8中你只會擷取到這樣的路徑："C:\fakepath\xxx”，其中xxx是你的檔案名稱。

這是怎麼回事呢？

原來，IE8出於安全性的考慮，上傳檔案時屏蔽了真實的本地檔案路徑，而以“C:\fakepath\”取代之。

但是我們就是想要擷取真實的本地檔案路徑怎麼辦呢？

你可以通過設定瀏覽器安全選項得到真實路徑：

Internet選項 -> 安全 -> 自訂層級 -> 將本地檔案上傳至伺服器時包含本地目錄路徑 -> 選“啟動” -> 確定

但是，作為開發人員，我們不能指望客戶去這麼做，所以我們必須通過代碼解決這個問題。

例如我的上傳檔案控制項的HTML代碼是：

<input id="file_upl" type="file" />

那麼在JS代碼中我就可以這樣來擷取真實的檔案路徑：

var file_upl = document.getElementById('file_upl');
file_upl.select();

var realpath = document.selection.createRange().text;

如果我們用的是Ext，那麼我們會使用Ext.ux.form.FileField組件，假設我們賦給它的id是"file_upl"，這時同樣會產生上面的問題，解決的辦法也是一樣，但是我們擷取到type為file的input才行，而根據"file_upl"擷取到的元素根本不是我們所需要的，Ext是自動產生了一個type為file的input，你可以通過DebugBar或其他類似工具看到這個input，它的id是賦給Ext.ux.form.FileField的id加上"-file"的尾碼，也就是"file_upl-file"，所以擷取真實檔案路徑的JS代碼就是：

var file_upl = document.getElementById('file_upl-file');
file_upl.select();

var realpath = document.selection.createRange().text;

此方案只針對IE瀏覽器，對其他瀏覽器暫時未作探討。