首頁 > 文章 > web前端 > 實例講解js如何讀取本地文件

實例講解js如何讀取本地文件

小云云原創: 2017-12-23 14:30:182600瀏覽

本文就為大家分享一篇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=&#39;file&#39; style=&#39;display:none&#39; id=&#39;"+this.input_id+"&#39; 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("<p>"+index+"----"+item.url+"</p>")
 })
})

使用jQuery 的promise物件改寫

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

function LocalFileUrl(){
 this.dtd ={};
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type=&#39;file&#39; style=&#39;display:none&#39; id=&#39;"+this.input_id+"&#39; 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("<p>"+index+"----"+item.url+"</p>")
 })
}).done(function(){
 console.log("完成");
}).done(function(){
 alert("已经读取了本地文件路径");
})

相容性

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

實例講解js如何讀取本地文件

相關文章