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瀏覽器,對其他瀏覽器暫時未作探討。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM