js에서 로컬 파일을 읽는 방법

亚连원래의: 2018-06-19 10:19:094625검색

아래에서는 js가 로컬 파일을 읽는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

브라우저에서 로컬 파일을 미리 보는 방법은 무엇입니까?

오늘의 주제는 브라우저를 사용하여 로컬 파일을 미리 보는 것입니다.

브라우저 보안 정책의 제한으로 인해 JavaScript 프로그램은 로컬 리소스에 자유롭게 접근할 수 없습니다. 이는 사용자 정보 보안을 위해 반드시 준수해야 하는 지침입니다. 네트워크의 JavaScript 프로그램이 사용자 호스트의 로컬 리소스에 자유롭게 액세스할 수 있다면 브라우저 사용자는 전혀 보안을 누릴 수 없습니다. 이러한 보안 제한에도 불구하고 브라우저는 사용자의 허가를 받아 여전히 로컬 리소스에 액세스할 수 있습니다.

사용자 권한을 얻는 방법은 태그를 통해 사용자가 직접 파일을 선택하도록 하는 것입니다. 이 과정은 사용자가 접근 권한을 부여하는 과정입니다. 그런 다음 획득한 File 객체를 사용하여 URL.createObjectURL(file)을 통해 파일 URL로 변환하고 img, video, audio 등과 같은 태그에 전달하여 사용할 수 있습니다. 로컬 파일을 URL로 변환하는 기능을 클래스로 캡슐화했습니다.

function LocalFileUrl(){
 var _this = this;
 this.input_id = &#39;input_getLocalFile&#39;+ 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 개체를 사용하여 다시 작성

이 방법의 장점은 체인 작성을 사용할 수 있고 실행 순서에 따라 여러 개의 완료된 이벤트 처리 기능을 바인딩할 수 있다는 것입니다. 바인딩에 순서를 결정합니다.

function LocalFileUrl(){
 this.dtd ={};
 this.input_id = &#39;input_getLocalFile&#39;+ 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("已经读取了本地文件路径");
})

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

js에서 로컬 파일을 읽는 방법

관련 기사