在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=&#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 == &#39;function&#39; && _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("已经读取了本地文件路径");
})

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

Web表單的JS外掛程式（精品推薦）

在jQuery如何實作線上客服功能

在jQuery中圖片檢視外掛如何使用

#

以上是在js中如何讀取本機文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！