js讀取本地文件的實(shí)例
如何用在瀏覽器端預(yù)覽本地文件?
今天的主題是使用瀏覽器預(yù)覽本地文件。
由于瀏覽器安全策略的限制,javascript程序不能自由地訪問本地資源,這是對(duì)用戶信息安全來說,是一項(xiàng)不得不遵守的準(zhǔn)則。假如網(wǎng)絡(luò)上的javascript程序可以自如地訪問用戶主機(jī)的本地資源,那么瀏覽器用戶將毫無安全可言。盡管有這個(gè)安全限制,但是在得到用戶允許的情況下,瀏覽器還是可以訪問本地資源的。
獲得用戶允許的方法就是通過標(biāo)簽來讓用戶手動(dòng)選擇文件,這一過程就是用戶授予訪問權(quán)限的過程。然后 使用獲得File 對(duì)象通過URL.createObjectURL(file)轉(zhuǎn)換為文件url, 就可以傳遞給類似y于img,video,audio等標(biāo)簽使用了。我將本地文件轉(zhuǎn)換為url 的功能封裝成了一個(gè)類。
function LocalFileUrl(){ var _this = this; this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000); $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>"); this.urls=[]; var _this = this; $("#" + this.input_id).change(function(e){ console.log("change"); //如果_this.urls 不為空,則釋放url if(_this.urls){ _this.urls.forEach(function(url,index,array){ URL.revokeObjectURL(url.url);//一經(jīng)釋放,馬上將無法使用這個(gè)url的資源 }); _this.urls = []; } $(this.files).each(function(index,file){ var url = URL.createObjectURL(file); _this.urls.push({url:url,file:file}); }); typeof _this.getted == 'function' && _this.getted(_this.urls); }) } /* 參數(shù)說明:getted:function(urls){} urls是一個(gè)url對(duì)象數(shù)組。[url] url = { url:url, //選取的文件url file:file //選取的文件對(duì)象引用 } */ LocalFileUrl.prototype.getUrl = function(getted){ this.getted = getted; $("#"+ this.input_id).click(); }
使用方法:
var localFileUrl = new LocalFileUrl();//實(shí)例化對(duì)象 //觸發(fā)讀取,彈出文件選擇框,并且監(jiān)聽文件選擇事件。 localFileUrl.getUrl(function(urls){ urls.forEach(function(item,index,array){ $("body").append("<div>"+index+"----"+item.url+"</div>") }) })
使用jQuery 的promise對(duì)象改寫
這種方式的好處是可以使用鏈?zhǔn)綄懛ǎ⑶铱梢越壎ǘ鄠€(gè)done事件處理函數(shù),執(zhí)行順序按照綁定順序。
function LocalFileUrl(){ this.dtd ={}; this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000); $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>"); this.urls=[]; var _this = this; $("#" + this.input_id).change(function(e){ //如果_this.urls 不為空,則釋放url if(_this.urls){ _this.urls.forEach(function(url,index,array){ URL.revokeObjectURL(url.url);//一經(jīng)釋放,馬上將無法使用這個(gè)url的資源 }); _this.urls = []; } $(this.files).each(function(index,file){ var url = URL.createObjectURL(file); _this.urls.push({url:url,file:file}); }); //傳入一個(gè)可選的參數(shù)數(shù)組 _this.dtd.resolveWith(window,new Array(_this.urls)); }) } /* 返回一個(gè)jquery 的promise 對(duì)象,可以綁定done()事件。done(urls)接收一個(gè)urls數(shù)組 { url:url, file:file// 選取的文件對(duì)象 } */ LocalFileUrl.prototype.getUrl = function(){ this.dtd = $.Deferred(); $("#"+ this.input_id).click(); return this.dtd.promise(); }
使用方式
var localFilrUrl = new LocalFileUrl(); // 綁定done事件 localFileUrl.getUrl().done(function(urls){ urls.forEach(function(item,index,array){ $("body").append("<div>"+index+"----"+item.url+"</div>") }) }).done(function(){ console.log("完成"); }).done(function(){ alert("已經(jīng)讀取了本地文件路徑"); })
兼容性
URL.createObjectURL(File/Blob)是一個(gè)實(shí)驗(yàn)性的功能。IE10及以上版本兼容。與之對(duì)應(yīng)的是URL.revokeObjectURL(url),它用來告訴瀏覽器已經(jīng)不需要這個(gè)url的引用了,可以釋放掉了。一經(jīng)調(diào)用,這個(gè)url立即失效。
相關(guān)文章
JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法示例
這篇文章主要介紹了JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法,結(jié)合實(shí)例形式分析了javascript響應(yīng)手機(jī)端屏幕上touch事件計(jì)算滑動(dòng)距離的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
在用戶注冊(cè)頁面,需要用戶在本地選擇一張圖片作為頭像,并同時(shí)預(yù)覽,實(shí)現(xiàn)思路有兩種,具體實(shí)現(xiàn)方法和實(shí)例代碼大家參考下本文2017-07-07JavaScript 獲取用戶客戶端操作系統(tǒng)版本
今天,同事反映部分電腦訪問系統(tǒng),安裝播放器(Media Player)報(bào)錯(cuò),自己本機(jī)測(cè)試沒問題,但是去用戶現(xiàn)場(chǎng)查看情況,部分電腦確實(shí)存在此類問題,不知道問題出在何處,希望我?guī)椭鉀Q一下。2009-08-08JavaScript實(shí)現(xiàn)圖片懶加載的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片懶加載的方法,結(jié)合實(shí)例形式分析了javascript圖片懶加載的原理、操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼
本文主要介紹了微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
這篇文章主要介紹了JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03js動(dòng)態(tài)設(shè)置div的值下例子
設(shè)置div的值想必大家都會(huì)吧,按要說動(dòng)態(tài)設(shè)置想必知道的人及寥寥無幾了,下面有個(gè)不錯(cuò)的示例,希望對(duì)大家有所幫助2013-10-10JS常用插件之Swiper插件實(shí)現(xiàn)輪播圖功能實(shí)例
項(xiàng)目中會(huì)多次使用到輪播圖組件,下面這篇文章主要給大家介紹了關(guān)于JS常用插件之Swiper插件實(shí)現(xiàn)輪播圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07JavaScript數(shù)據(jù)類型轉(zhuǎn)換實(shí)例(其他類型轉(zhuǎn)字符串、數(shù)值型、布爾類型)
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,本文分別介紹了其他類型轉(zhuǎn)為字符串、其他類型轉(zhuǎn)為數(shù)值型以及其他類型轉(zhuǎn)為布爾類型的方法,需要的朋友可以參考下2021-07-07