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='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls = [];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  console.log("change");
  //if _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("<div>"+index+"----"+item.url+"</div>")
 })
})

jQuery의 promise 객체를 사용하여 수정합니다.

이 방식의 장점은 연속적 쓰기와 여러 done 이벤트 처리 함수를 바인딩할 수 있으며, 바인딩 순서에 따라 실행됩니다.

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){
  //if _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("<div>"+index+"----"+item.url+"</div>")
 })
}).done(function(){
 console.log("완료");
}).done(function(){
 alert("로컬 파일 경로를 읽었습니다.");
})

호환성

URL.createObjectURL(File/Blob)은 실험적인 기능입니다。IE10및 이상 버전과 호환됩니다이에 상응하는 것은 URL.revokeObjectURL(url)입니다. 이는 브라우저가 해당 URL의 참조가 더 이상 필요하지 않다는 것을 알리고, 해제할 수 있도록 합니다. 호출되면 해당 URL은 즉시 무효화됩니다。

언급: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 본사가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용으로, 본 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하면 이메일을 보내 주시기 바랍니다: notice#oldtoolbag.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제할 것입니다。）