如何解決使用js獲取inputfile的絕對路徑預(yù)覽圖片C:fakepath問題

這篇文章主要為大家展示了“如何解決使用js獲取inputfile的絕對路徑預(yù)覽圖片C:fakepath問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決使用js獲取inputfile的絕對路徑預(yù)覽圖片C:fakepath問題”這篇文章吧。

1.問題

頁面有一個(gè)input file服務(wù)器控件，一個(gè)p，p是image標(biāo)簽的容器，當(dāng)點(diǎn)擊input file的值改變，我們往p里追加image標(biāo)簽； 但當(dāng)通過js的onchange事件動(dòng)態(tài)獲取input file 的路徑的時(shí)候，發(fā)現(xiàn)console.log(path)打印出的路徑是被瀏覽器屏蔽的，例如：C:fakepathfile.jpg

2.原因

由于瀏覽器的安全機(jī)制，當(dāng)我們獲取input file的路徑時(shí)被fakepath代替，隱藏了真實(shí)物理路徑。 當(dāng)然，調(diào)整瀏覽器的瀏覽器安全設(shè)置可以解決這個(gè)問題，但是這種解決辦法顯然不是我們想要的，不可能讓每個(gè)用于都去設(shè)置瀏覽器安全選項(xiàng)。

3.認(rèn)識window.URL.createObjectURL()

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

4.解決辦法

functiongetObjectURL(file){varurl=null;if(window.createObjcectURL!=undefined){url=window.createOjcectURL(file);}elseif(window.URL!=undefined){url=window.URL.createObjectURL(file);}elseif(window.webkitURL!=undefined){url=window.webkitURL.createObjectURL(file);}returnurl;}//使用方法$("#file").change(function(){varfile=this.files[0];varurl=getObjectURL(file);//blob:http://doamin.com/5376c16a-02f9-489f-b30c-97a1808d5724});

以上是“如何解決使用js獲取inputfile的絕對路徑預(yù)覽圖片C:fakepath問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！