快捷導(dǎo)航

js讀取本地文件的實例

更新時間：2017年12月22日 10:09:54 作者：BBQ只有番薯

下面小編就為大家分享一篇js讀取本地文件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如何用在瀏覽器端預(yù)覽本地文件？

今天的主題是使用瀏覽器預(yù)覽本地文件。

由于瀏覽器安全策略的限制，javascript程序不能自由地訪問本地資源，這是對用戶信息安全來說，是一項不得不遵守的準(zhǔn)則。假如網(wǎng)絡(luò)上的javascript程序可以自如地訪問用戶主機的本地資源，那么瀏覽器用戶將毫無安全可言。盡管有這個安全限制，但是在得到用戶允許的情況下，瀏覽器還是可以訪問本地資源的。

獲得用戶允許的方法就是通過標(biāo)簽來讓用戶手動選擇文件，這一過程就是用戶授予訪問權(quán)限的過程。然后使用獲得File 對象通過URL.createObjectURL(file)轉(zhuǎn)換為文件url, 就可以傳遞給類似y于img,video,audio等標(biāo)簽使用了。我將本地文件轉(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, //選取的文件url
file: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對象改寫

這種方式的好處是可以使用鏈?zhǔn)綄懛?，并且可以綁定多個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及以上版本兼容。與之對應(yīng)的是URL.revokeObjectURL(url)，它用來告訴瀏覽器已經(jīng)不需要這個url的引用了，可以釋放掉了。一經(jīng)調(diào)用，這個url立即失效。

您可能感興趣的文章: