파일 API

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 파일 API를 새롭게 지원합니다. 파일 API는 W3C(World Wide Web 컨소시엄) 초안 웹 사양으로, 웹 응용 프로그램에서 파일 개체를 표현하는 것은 물론 파일 개체를 프로그래밍 방식으로 선택하고 해당 데이터에 액세스하는 방법을 정의합니다. W3C 웹 응용 프로그램 작업 그룹에서는 파일 API의 표준화를 진행 중입니다. 파일 API를 사용하면 웹 개발자가 확장 또는 플러그 인 없이 안전하게 클라이언트 컴퓨터의 로컬 파일에 액세스할 수 있습니다.

매끄러운 파일 업로드 환경

파일 API를 사용하면 브라우저 또는 앱에서 파일을 읽고 조작할 수 있습니다. 단, 사용자의 승인이 필요합니다. 또한 파일 API는 플러그 인 없이도 매끄러운 파일 업로드 환경을 제공합니다.

다음 W3C 파일 API 예제에서 각 코드 블록은 진행, 오류 및 성공 상태를 처리합니다.


function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read.
  }
}


Blob 생성자

Blob 생성자를 사용하면 웹 개발자가 클라이언트에서 직접 Blob(파일과 동등)를 생성하거나 조작할 수 있습니다. 생성자는 현재 작업 초안 단계에 있는 W3C의 파일 API(영문) 사양에 정의되어 있습니다.

이전 버전의 파일 API에서는 파일을 읽을 수만 있고 클라이언트에서 직접 편집할 수 없었습니다. 파일의 표현을 변경할 수는 있었지만 이러한 편집 내용을 저장하려면 파일 및 편집 내용을 서버에 업로드하고 서버에서 모든 작업을 처리한 다음 변경된 파일을 다운로드해야 했습니다. Blob 생성자를 사용하면 배열에서 Blob를 쉽게 만들 수 있습니다. 배열에는 Blob 개체, 텍스트 문자열 또는 배열 버퍼가 포함될 수 있으며, Blob를 만들 때 배열을 매개 변수로 Blob에 전달합니다.

선택적 사전 개체는 두 번째 매개 변수로 추가될 수 있으며, typeendings라는 두 멤버를 포함할 수 있습니다.

다음 예제(Internet Explorer 10 이상)는 이 프로세스를 간단하게 보여 줍니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Saving Files Locally</title>
</head>

<body>
  <h1>Saving Files Locally</h1>
  <script>
    //check for Blob availability
    if (typeof Blob !== "undefined") {
      demoBlobs();
    } else {
      //your fallback code here
    }

    function demoBlobs(){  
      //create a Blob with an array and the optional dictionary object.
      var blob1 = new Blob(
        ["There are 10 kinds of people ", "in the world.\r\n"], //array
        { type: "text/plain", endings: "native" } //dictionary object
      );

      //create a second blob that uses the first blob in its array
      var blob2 = new Blob([blob1, "Those who understand binary and those who don't."]);

      // Save the blob1 content to a file, giving just a "Save" option
      window.navigator.msSaveBlob(blob1, 'msSaveBlob_testFile.txt'); 
      alert('File saved using msSaveBlob() - note the single "Save" button below.');
  
      // Save the blob2 content to a file, giving both "Save" *and* "Open" options
      window.navigator.msSaveOrOpenBlob(blob2, 'msSaveBlobOrOpenBlob_testFile.txt'); 
      alert('File saved using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>


msSaveBlob()msSaveOrOpenBlob() 메서드를 통해 사용자는 웹에서 다운로드한 파일처럼 Blob를 사용자 컴퓨터에 저장할 수 있습니다. 파일은 기본적으로 Downloads 폴더에 저장됩니다.

msSaveBlob()msSaveOrOpenBlob() 간의 차이점은 msSaveBlob() 메서드의 경우 저장 단추만 사용자에게 제공한다는 것입니다. msSaveOrOpenBlob() 메서드는 저장열기 단추를 둘 다 제공합니다. Internet Explorer 10 이상에서 위의 샘플 코드를 실행하면 이 차이점을 보다 명확하게 확인할 수 있습니다.

기타 고급 기능

기타 파일 관련 고급 기능으로 파일 형식 필터링을 사용한 다중 파일 업로드(파일당 4GB)가 있습니다. 다음 예제에서는 사용자가 GIF(Graphics Interchange Format) 또는 JPEG 파일을 여러 개 선택할 수 있습니다.


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

자세한 내용은 HTML5(영문) 사양의 "파일 업로드 상태(type=file)" 섹션을 참조하세요.

API 참조

File API

샘플 및 자습서

로컬 파일을 관리하는 방법

Internet Explorer 테스트 드라이브 데모

BlobBuilder
이진 파일 검사기

IEBlog 게시물

IE10의 새 Blob 생성자
BlobBuilder를 통해 파일 만들기
HTML5, 사이트 준비 및 실험
형식화된 배열을 사용하여 이진 데이터 작업

사양

파일 API

관련 항목

파일 API를 사용하여 로드

 

 

표시:
© 2014 Microsoft