집 >웹 프론트엔드 >JS 튜토리얼 >js가 로컬 파일을 읽는 방법을 설명하는 예

js가 로컬 파일을 읽는 방법을 설명하는 예

小云云원래의: 2017-12-23 14:30:182625검색

이 기사는 js가 로컬 파일을 읽는 예를 여러분과 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

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

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

사용자 권한을 얻는 방법은 태그를 통해 사용자가 직접 파일을 선택하도록 하는 것입니다. 이 과정은 사용자가 접근 권한을 부여하는 과정입니다. 그런 다음 획득한 File 객체를 사용하여 URL.createObjectURL(file)을 통해 파일 URL로 변환하고 이를 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 객체를 사용하여 다시 작성

이 방법의 장점은 체인 쓰기를 사용할 수 있고 완료된 여러 이벤트 처리 기능을 바인딩할 수 있으며 실행 순서는 바인딩 순서입니다. .

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();
}

Usage

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("已经读取了本地文件路径");
})

Compatibility

URL.createObjectURL(파일/Blob)은 실험적인 기능입니다. IE10 이상과 호환됩니다. 이에 대응하는 URL.revokeObjectURL(url)은 이 URL에 대한 참조가 더 이상 필요하지 않으며 해제될 수 있음을 브라우저에 알리는 데 사용됩니다. 일단 호출되면 이 URL은 즉시 유효하지 않게 됩니다.

js가 로컬 파일을 읽는 방법을 설명하는 예

관련 기사