js

JS - 파일API : FileList 객체

3월 16, 2019
자바스크립트에서는 <input type='file'> 인 파일 선택상자로부터 지정된 파일에 접근할 수 있는 files 프로퍼티를 제공합니다.

files 프로퍼티는 업로드된 파일의 FileList 객체를 반환하는데, 대표적으로 다음 표와 같습니다.

종 류 설 명
name 파일 이름
type 파일 MIME-TYPE
size 파일의 크기. 바이트 단위
lastModifiedDate 최종 갱신일
lastModified 최종 수정시간을 밀리 초로 반환
(1970년 1월 1일 이후)
webkitRelativePath 선택한 파일의 상대경로 URL
webkitdirectory 폴더를 선택할 수 있게 함

기본적인 형식은 다음과 같습니다.

<input type='file' onchange='onFilePicked(event)'>
<script>
var onFilePicked = function(event) {
  var input = event.target;

  var file = input.files[0];
  console.log(file.name);
  // use_image.jpg
};
</script>

다음은 파일을 선택해서 전송 버튼을 클릭하면 파일 정보를 출력하는 예제입니다. <input type="file"> 에 multiple 속성을 지정하면 다수의 파일을 선택할 수 있습니다.

<form>
 <input type="file" id="userfile" name="usefile" value="" multiple>
 <input type="button" id="submit" value="전송">
</form>
<div id="print"></div>

<script>
var btn = document.getElementById("submit");

btn.addEventListener("click", function(){
  var data = document.getElementById("userfile").files;
  var text = document.getElementById("print");

  for(var i = 0; i < data.length; i++){
    text.innerHTML += "File Name: " + data[i].name + " <br/>";
    text.innerHTML += "Mime-Type:: " + data[i].type + " <br/>";
    text.innerHTML += "File Size: " + data[i].size / 1024 + "Kb <br/>";
    text.innerHTML += "최종 갱신일: " + data[i].lastModifiedDate + " <hr/>";
  }
  /*
  결과:
    File Name: 9944A84C5CA598092A.jpg 
    Mime-Type:: image/jpeg 
    File Size: 78.703125Kb 
    최종 갱신일: Sat Apr 20 2019 20:35:36 GMT+0900 (한국 표준시)

    File Name: 2010441084.banner_dd0637ec6ab7f65d320a23c0e3f3a4a5.jpg 
    Mime-Type:: image/jpeg 
    File Size: 61.9423828125Kb 
    최종 갱신일: Fri May 24 2019 11:35:09 GMT+0900 (한국 표준시)
  */
});
</script>

다음은 webkitRelativePath 에 대한 예제입니다. webkitRelativePath 는 파일의 상대경로를 반환하며 webkitdirectory 는 폴더를 선택할 수 있게 해줍니다. 폴더를 선택하려면 <input type='file'> 에 webkitdirectory 를 추가해 주세요.

<input type="file" id="userfile" name="usefile" webkitdirectory>

<input type="hidden"> 요소를 하나 만들고 파일의 상대경로를 함께 서버로 전송하면 폴더를 재귀적으로 만들 수 있습니다.

<form>
 <input type="file" id="userfile" name="usefile" webkitdirectory>
 <input type="hidden" id="fileList" name="fileList">

 <input type="button" id="submit" value="전송">
</form>
<script>
var btn = document.getElementById("submit");

btn.addEventListener("click", function(){
  var data = document.getElementById("userfile").files;
  var fileList = "";

  for(var i = 0; i < data.length; i++){
    fileList += data[i].webkitRelativePath  + "\n";
  }
  document.getElementById("fileList").value = fileList;
  /*
  결과:
    vendor/js/custom.js 
    vendor/js/prefixfree.dynamic-dom.min.js 
    vendor/css/custom.css 
    vendor/css/signin.css 
  */
});
</script>




파일 업로드 예제

HTML5 부터 지원하는 FileAPI 는 프로그래밍적으로 파일 객체 표현 뿐만 아니라 로컬 파일에 접근할 수 있는 API 를 제공하는데, 이제 파일 인터페이스로 이름, 크기, 타입 등 기본적인 데이터에 접근할 수 있게 되었습니다.


<!DOCTYPE html>  
<html>  
<head>  
  <title>File API Demo</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
</head> 
<body>  

  <h1>File API Demo</h1> 
  <h3>이미지 파일(들)을 선택하세요.</h3> 
  <input id="files-upload" type="file" multiple accept="image/*"> 
   
  <h3>Uploaded files</h3>  
  <ul id="file-list">  
    <li class="no-items">(파일이 선택되지 않음)</li>  
  </ul> 

  <script> 
    var filesUpload = document.getElementById("files-upload"), 
        fileList = document.getElementById("file-list"); 
     
    function traverseFiles (files) { 
      var li, 
          file, 
          fileInfo; 
      fileList.innerHTML = ""; 
         
      for (var i=0, il=files.length; i<il; i++) { 
        li = document.createElement("li"); 
        file = files[i]; 
        fileInfo = "<div><strong>Name:</strong> "

                     + file.name + "</div>"; 
        fileInfo += "<div><strong>Size:</strong> "

                      + file.size + " bytes</div>"; 
        fileInfo += "<div><strong>Type:</strong> "

                      + file.type + "</div>"; 
        li.innerHTML = fileInfo; 
        fileList.appendChild(li); 
      }; 
    }; 
     
    filesUpload.onchange = function () { 
      traverseFiles(this.files); 
    }; 
  </script> 
</body>  
</html>

Tag:

0 Comments

0 댓글