javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader

 

javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader

 

이전 포스팅에서 하나의 Text 파일을 읽어 처리하는 방법을 알아보았습니다.

하지만 꼭 하나의 html file 태그에 하나의 파일만 처리하는 법은 없죠.

 

Link : javascript 자바스크립트 파일 텍스트 읽기 text file read 방법, 파일데이터 추출

 

이번엔 복수의 파일을 선택하여 처리하는 방법을 알아보도록 하겠습니다.

 

 

여러개의 파일을 처리하기 위해선 여러개의 파일을 선택해야 겠죠?

기존에 file 태그에 multiple="multiple" 옵션을 추가하고

name의 명칭 끝에 [] 을 붙여줍니다. (name="fileNames1[]")

[] 라는 것은 배열로 처리된다는 의미겠죠?

<input multiple="multiple" name="fileNames1[]" id="file1" type="file"/>

 

이제 여러개의 파일을 선택 할 수 있게 되었습니다.

저 같은 경우는 선택을 한 후에 따로 버튼을 만들어 파일을 읽는 로직으로 구현하였는데요,

버튼을 클릭하면 file의 name을 매개변수로 아래의 함수를 호출합니다.

 

readFile2('fileNames1[]');

 

readFile2의 로직은 아래와 같습니다.

jquery each문을 썼는데 단

const readFile2 = function(fileNames) {
    const target = document.getElementsByName(fileNames);
    const fileLength = target[0].files.length;
      if (fileLength<1) return;
      $.each(target[0].files, function(index, file){
          const reader = new FileReader();
          reader.onload = function(e) {
              fileData = e.target.result;
              //요 fileData로 파일 내 텍스트가 읽어드려진다.
          }
          reader.readAsText(file, 'euc-kr');
      });
}

 

fileLength가 선택된 파일이고 $.each문을 활용해 선택된 파일들을 읽어오는 로직입니다.

 

하나의 파일을 읽을 때와 비슷하지만 복수의 파일을 처리하여야되기 때문에 $.each를 사용하였구요.

jquery를 안쓰시면 단순 반복문 사용하시면 됩니다.

위의 fileData에 각각의 파일의 데이터가 들어오게되고, 로직에 맞게 처리하시면 됩니다.