input 태그 file 타입에 선택된 파일 정보 가져오기

input 태그에는 서버에 파일을 업로드하기 위한 file 타입의 요소가 존재한다.

이 input 태그에서 선택된 파일들의 정보를 가져와 목록에 출력하는 기능을 구현하고자 한다.

 

구현된 화면은 다음과 같다.

 

 

기능 구현에 사용한 코드는 다음과 같다.

 

function readyFile(){

    var files = document.querySelector('#file').files;
    var code = '';
    
    for(let i = 0; i < files.length; i++){
        let file = files[i];
        
        var type = file.name.split('.');
        type = type[type.length - 1];
        
        var size = (Math.floor(file.size / 1024)).toLocaleString('ko-KR') + 'KB';
        
        code += '<tr class="text-center">';
        code += '<td scope="row">' + (i + 1) + '</td>';
        code += '<td class="text-truncate">' + file.name + '</td>';
        code += '<td>' + type + '</td>';
        code += '<td>' + size + '</td>';
        code += '<td><input type="button" class="btn btn-danger deleteBtn" value="삭제"></td>';
        code += '</tr>';
    }
    
    $('.tableBody').html(code);
}

 

 

우선 file 타입의 input 태그를 가져오는데 files라는 키워드를 통해

해당 요소에서 FileList라는 객체를 가져올 수 있다.

 

FileList 객체는 이름 그대로 파일 목록 객체이며 각 파일별 정보들을 담고 있다.

 

내 경우에는 multiple 속성으로 여러 개의 파일을 한 번에 업로드할 수 있으므로

여기서는 반복문을 사용해 각 파일별 정보를 가공해 테이블에 삽입해 주었다.