您的位置 : 網站首頁 > 幫助中心  >  常見問題

圖片上傳路徑自動轉到桌面不記憶上傳操作路徑的解決方法

在使用<input id="file" type="file" />控件上傳文件時,有時會需要獲取文件本地路徑展示給客戶,這時可以通過這樣的方式獲取文件本地路徑:
document.getElementById('file_upl').value
這在IE7及以前的IE瀏覽器版本上都沒有問題,但是在有些IE8中你只會獲取到桌面的文件名。

這是怎么回事呢?


原來,IE8出于安全性的考慮,上傳文件時屏蔽了真實的本地文件路徑,而以桌面路徑取代之。

但是我們就是想要獲取真實的本地文件路徑怎么辦呢?

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

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


本頁網址:http://www.qsxyor.icu/newsv_75.html
關鍵詞:圖片上傳 | 上傳路徑 |
十年獨立網站程序開發、網站美工經驗。所有網站程序均為原創開發,絕不使用免費網站程序修改。原創版網站絕不會再賣給第三方使用。所售出網站程序請不要給第三方使用。
2019王中王