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


<input type="file"> 요소는 보통 하나의 파일만을 선택할 수 있었지만 'multiple' 속성을 이용하면 파일을 여러 개 선택할 수 있게 해줍니다.


파일 속성 중 accept 속성은 파일의 종류(MIME)를 지정할 수 있습니다. 이미지 파일만 선택하게 하려면 "image/*", 비디오만 선택하게 하려면 "video/*"로 설정하고, 모든 파일을 선택하게 하려면 설정을 비워두면 됩니다.



ex #1)

<!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>


출처: http://www.w3.org/TR/FileAPI/

        http://html5.firejune.com/


블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요