js如何讀取本地文件

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

創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，外鏈，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

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

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

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

獲得用戶允許的方法就是通過標(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();//實(shí)例化對象
//觸發(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)是一個實(shí)驗(yàn)性的功能。IE10及以上版本兼容。與之對應(yīng)的是URL.revokeObjectURL(url)，它用來告訴瀏覽器已經(jīng)不需要這個url的引用了，可以釋放掉了。一經(jīng)調(diào)用，這個url立即失效。

以上是“js如何讀取本地文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：js如何讀取本地文件
網(wǎng)頁網(wǎng)址：http://bm7419.com/article4/igicoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、面包屑導(dǎo)航、網(wǎng)站建設(shè)、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)