어제 오늘 내일

[Javascript] 디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로) 본문

IT/Javascript

[Javascript] 디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로)

hi.anna 2020. 6. 10. 02:03

 

지난 번에는 사용자가 로컬에서 파일을 선택하고,

그 파일 내용을 읽어오는 방법을 알아보았습니다.

 

[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

 

[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type..

hianna.tistory.com

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

 

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

HTML/Javascrip로 로컬 텍스트 파일을 읽어서 선택한 파일에 대한 정보 (파일명, 파일크기 등)을 보여주는 코드입니다. Ctrl / Shift 키를 사용하여 여러개의 파일을 선택할 수 있습니다. See the Pen read fil

hianna.tistory.com

 

이번에는 사용자가 디렉토리를 선택하면,

디렉토리(폴더) 안의 파일을 목록을 읽어오는 방법을 알아보도록 하겠습니다.

 

 

디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로)

webkitdirectory

사용자가 파일이 아닌 디렉토리를 선택하게 하기 위해서는

input 태그의 속성으로 'webkitdirectory' 속성을 지정해 줍니다.

<input type='file' webkitdirectory />

webkitdirectory 속성을 지정하면 사용자는 파일이 아닌 디렉토리를 선택할 수 있게 됩니다.

( 단, 이 속성은 chrome 및 microsoft edge 등 대부분의 많은 브라우저들에서 작동하지만, 표준은 아니기 때문에 Internet Explorer에서는 작동하지 않습니다. )

 

 

디렉토리 안의 파일 정보 읽어오기

다음은 'webkitdirectory' 속성을 적용하여 

디렉토리를 선택하고,

선택한 디렉토리 안의 파일의 상대 경로와 파일명 목록을 가져오는 예제입니다.

See the Pen read file by anna (@hianna) on CodePen.

 

< index.html >

<html>
    <body>
        <form>
            <div>
            <input type="file" id="directory_upload" webkitdirectory>
            </div>
            <div class="file_list">
            <p></p>
            </div>
        </form>
        <script src='directory_upload.js' ></script>
    </body>
</html>

먼저, HTML 파일에서

사용자에가 디렉토리를 선택할 수 있도록 input 속성에 webkitdirctory 속성을 지정하였습니다.

 

< directory_upload.js >

const input = document.querySelector('input');
const preview = document.querySelector('.file_list');

input.addEventListener('change', showTextFile);

function showTextFile() {
    const selectedFiles = input.files;
    const list = document.createElement('ul');
    preview.appendChild(list);

    for(const file of selectedFiles) {
        const listItem = document.createElement('li');
        const summary = document.createElement('div');

        summary.textContent = file.webkitRelativePath;

        listItem.appendChild(summary);
        list.appendChild(listItem);
    }
}

먼저, 위 코드에서

webkitdirectory, webkitRelativePath를 제외한 나머지 코드가 이해가 가지 않는다면

사용자에게 파일을 입력받는 방법을 알아보는 아래의 글을 먼저 읽어보세요.

디렉토리 안의 파일 목록을 읽어오는 방법은, 다중 파일을 선택한 경우 파일 목록을 읽어오는 방법과 같습니다.

 

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

 

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

HTML/Javascrip로 로컬 텍스트 파일을 읽어서 선택한 파일에 대한 정보 (파일명, 파일크기 등)을 보여주는 코드입니다. Ctrl / Shift 키를 사용하여 여러개의 파일을 선택할 수 있습니다. See the Pen read fil

hianna.tistory.com

 

 

디렉토리 안의 파일 상대경로 가져오기

line 15 : directory_upload.js

file.webkitRelativePath

File 객체의 webkitRelativePath 속성을 이용하여, 

디렉토리 안의 파일의 상대경로를 가져올 수 있습니다.

 

  • 아이유
    • 1집
      • boo.mp3
      • 좋은날.mp3
    • 2집
      • 너랑나.mp3
      • 비밀.mp3

위와 같은 디렉토리 구조가 있다고 가정하고,

사용자가 '아이유' 폴더를 선택하면,

FileList의 첫번째 File의 webkitRelativePath 값은 '아이유/1집/boo.mp3' 가 됩니다.

 

 

디렉토리 안의 파일명 가져오기

line 15 : directory_upload.js

file.name

directory_upload.js 파일의 15라인을 file.name으로 변경하면

상대경로를 제외한 파일의 이름만 가져올 수 있습니다.

 

 

디렉토리를 선택하고, 선택한 디렉토리 안의 파일 정보를 가져오는 방법을 알아보았습니다~

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 반복문(1) - for  (0) 2020.06.22
[Javascript] 배열 길이 체크, 설정하기 (length)  (0) 2020.06.22
[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)  (4) 2020.06.04
[Javascript] 모든 문자열 치환하기 (replace, replaceAll)  (3) 2020.05.06
[Javascript] replace() 함수 사용하여 대소문자 구분 없이 치환하기  (0) 2020.05.05
공유하기 링크
'IT/Javascript' Related Articles more
Comments