使用js獲取上傳文件的真實路徑

我們在使用html中的<input type="file">控件上傳文件時，有時需要在本頁面獲取上傳文件的路徑名稱，但是由於現在瀏覽器出於安全考慮，大多數都無法獲得文件的真實路徑。如果要在js中解決這個問題，可以區別不同品牌的瀏覽器，進行不同的操作來獲得文件的真實路徑，比如谷歌瀏覽器可以用：window.webkitURL.createObjectURL(File file)來獲得，詳細代碼如下：

1、首先定義文件上傳和預覽照片的兩個控件：

<input type="file" name="pic" onChange="showPic(this)">
<img src="" id="preview" width="300" height="240" style="opacity:0">    // 用於顯示上傳的圖片，默認定義爲不顯示

2、在js中定義兩個函數：

 function showPic(obj) {
        var fileUrl = getObjectURL(obj.files[0]);
        if (fileUrl != null) {
            document.getElementById("preview").src = fileUrl;      // 圖片預覽
            document.getElementById("preview").style = "opacity:1";
        }
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已
        if (window.createObjectURL != undefined) {   // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {        // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {  // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url;

}

在getObjectURL(file)函數中可以區分不同的瀏覽器，獲得文件的真是路徑。