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

博客分類：

• ?
• javascript
• HTML

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

轉載于:https://www.cnblogs.com/zouhao/p/9546441.html

總結

以上是生活随笔為你收集整理的IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。