js獲取文件輸入框的真實目錄

1.問題

頁面有一個input file服務器控件，一個div，div是image標簽的容器，當點擊input file的值改變，我們往div里追加image標簽；
但當通過js的onchange事件動態獲取input file 的路徑的時候，發現console.log(path)打印出的路徑是被瀏覽器屏蔽的，例如：C:\fakepath\file.jpg

2.原因

　　由於瀏覽器的安全機制，當我們獲取input file的路徑時被fakepath代替，隱藏了真實物理路徑。
當然，調整瀏覽器的瀏覽器安全設置可以解決這個問題，但是這種解決辦法顯然不是我們想要的，不可能讓每個用於都去設置瀏覽器安全選項。

3.認識window.URL.createObjectURL()

　　URL.createObjectURL()方法會根據傳入的參數創建一個指向該參數對象的URL，這個URL的生命僅存在於它被創建的這個文檔里，新的對象URL指向執行的File對象或Blob對象。
語法：objcetURL = window.URL.createObjectURL(file || blob);
參數：File對象和Blob對象；File對象就是一個文件，比如我用file type=”file”標簽來上傳文件，那么里面的每個文件都是一個file對象。Blob對象就是二進制數據，比如在XMLHttpRequest里，如果指定requestType為blob，那么得到的返回值也是一個blob對象。
每次調用createObjectURL的時候，一個新的URL對象就被創建了。即使你已經為同一個文件創建過一個URL.，如果你不再需要這個對象，要釋放它，需要使用URL.revokeObjectURL()方法.。當頁面被關閉，瀏覽器會自動釋放它，但是為了最佳性能和內存使用，當確保不再用得到它的時候,就應該釋放它。

4.解決辦法

<img src="" />
<input type="file" name="file1" id="file1" />
<button>點我</button>

<script>
    function getObjectURL(file) {
        var url = null;
        if (window.createObjcectURL != undefined) {
            url = window.createOjcectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //使用方法
    $("#file1").change(function(){
        var file = this.files[0];
        var url = getObjectURL(file);//blob:http://doamin.com/5376c16a-02f9-489f-b30c-97a1808d5724
        console.log(url)
        $('img')[0].src = url
    });
</script>

 

來源：CSDN
原文：https://blog.csdn.net/qq_34627459/article/details/79569313?utm_source=copy