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.解決辦法
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;
}
//使用方法
$("#file").change(function(){
var file = this.files[0];
var url = getObjectURL(file);//blob:http://doamin.com/5376c16a-02f9-489f-b30c-97a1808d5724
});