下面我就為大家分享一篇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("");
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(""+index+"----"+item.url+"
")
})
})#使用jQuery 的promise物件改寫
這種方式的好處是可以使用鍊式寫法，並且可以綁定多個done事件處理函數，執行順序按照綁定順序。
function LocalFileUrl(){
this.dtd ={};
this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
$("body").append("");
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(""+index+"----"+item.url+"
")
})
}).done(function(){
console.log("完成");
}).done(function(){
alert("已经读取了本地文件路径");
})上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是在js中如何讀取本機文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
