如何用在瀏覽器端預覽本地文件？
今天的主題是使用瀏覽器預覽本地文件。
由于瀏覽器安全策略的限制，javascript程序不能自由地訪問本地資源，這是對用戶信息安全來說，是一項不得不遵守的準則。假如網(wǎng)絡上的javascript程序可以自如地訪問用戶主機的本地資源，那么瀏覽器用戶將毫無安全可言。盡管有這個安全限制，但是在得到用戶允許的情況下，瀏覽器還是可以訪問本地資源的。
獲得用戶允許的方法就是通過標簽來讓用戶手動選擇文件，這一過程就是用戶授予訪問權(quán)限的過程。然后 使用獲得File 對象通過URL.createObjectURL(file)轉(zhuǎn)換為文件url, 就可以傳遞給類似y于img,video,audio等標簽使用了。我將本地文件轉(zhuǎn)換為url 的功能封裝成了一個類。
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)釋放，馬上將無法使用這個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是一個url對象數(shù)組。[url]url = {url:url, //選取的文件urlfile:file //選取的文件對象引用}*/LocalFileUrl.prototype.getUrl = function(getted){ this.getted = getted; $("#"+ this.input_id).click();}使用方法：
var localFileUrl = new LocalFileUrl();//實例化對象//觸發(fā)讀取，彈出文件選擇框，并且監(jiān)聽文件選擇事件。 localFileUrl.getUrl(function(urls){ urls.forEach(function(item,index,array){ $("body").append("<div>"+index+"----"+item.url+"</div>") })})使用jQuery 的promise對象改寫
這種方式的好處是可以使用鏈式寫法，并且可以綁定多個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)釋放，馬上將無法使用這個url的資源 }); _this.urls = []; } $(this.files).each(function(index,file){ var url = URL.createObjectURL(file); _this.urls.push({url:url,file:file}); }); //傳入一個可選的參數(shù)數(shù)組 _this.dtd.resolveWith(window,new Array(_this.urls)); })}/*返回一個jquery 的promise 對象，可以綁定done()事件。done(urls)接收一個urls數(shù)組{ url:url, file:file// 選取的文件對象}*/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)是一個實驗性的功能。IE10及以上版本兼容。與之對應的是URL.revokeObjectURL(url)，它用來告訴瀏覽器已經(jīng)不需要這個url的引用了，可以釋放掉了。一經(jīng)調(diào)用，這個url立即失效。
新聞熱點
疑難解答
