js如何讀取本地文件

這篇文章主要為大家展示了“js如何讀取本地文件”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“js如何讀取本地文件”這篇文章吧。

如何用在瀏覽器端預覽本地文件？

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

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

獲得用戶允許的方法就是通過標簽來讓用戶手動選擇文件，這一過程就是用戶授予訪問權限的過程。然后 使用獲得File 對象通過URL.createObjectURL(file)轉換為文件url, 就可以傳遞給類似y于img,video,audio等標簽使用了。我將本地文件轉換為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);//一經釋放，馬上將無法使用這個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);
 })
}
/*
參數說明：getted:function(urls){}
urls是一個url對象數組。[url]
url = {
url:url, //選取的文件url
file:file //選取的文件對象引用
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

使用方法：

var localFileUrl = new LocalFileUrl();//實例化對象
//觸發讀取，彈出文件選擇框，并且監聽文件選擇事件。  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 })
})

使用jQuery 的promise對象改寫

這種方式的好處是可以使用鏈式寫法，并且可以綁定多個done事件處理函數，執行順序按照綁定順序。

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);//一經釋放，馬上將無法使用這個url的資源
   });
   _this.urls = [];
  }
  $(this.files).each(function(index,file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url,file:file});
  });
  //傳入一個可選的參數數組
  _this.dtd.resolveWith(window,new Array(_this.urls));
 })
}
/*
返回一個jquery 的promise 對象，可以綁定done()事件。done(urls)接收一個urls數組
{
 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("已經讀取了本地文件路徑");
})

兼容性

URL.createObjectURL(File/Blob)是一個實驗性的功能。IE10及以上版本兼容。與之對應的是URL.revokeObjectURL(url)，它用來告訴瀏覽器已經不需要這個url的引用了，可以釋放掉了。一經調用，這個url立即失效。

以上是“js如何讀取本地文件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！