JavaScript
File API, Blob 및 FileReaders

통사론

• 독자 = 새로운 FileReader ();

매개 변수

비고

문자열로 파일 읽기

페이지에 파일 입력이 있는지 확인하십시오.

<input type="file" id="upload">

자바 스크립트 :

document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
    };
    reader.readAsText(files[0]);
}

dataURL 파일 읽기

HTML5 File API를 사용하여 웹 애플리케이션 내에서 파일의 내용을 읽을 수 있습니다. 먼저 type="file" 인 입력을 HTML에 추가합니다.

<input type="file" id="upload">

다음으로 파일 입력에 변경 리스너를 추가 할 것입니다. 이 예제는 JavaScript를 통해 리스너를 정의하지만 입력 요소에 속성으로 추가 될 수도 있습니다. 이 리스너는 새 파일을 선택할 때마다 트리거됩니다. 이 콜백 내에서 선택한 파일을 읽고 선택한 파일의 내용으로 이미지를 만드는 등의 추가 작업을 수행 할 수 있습니다.

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

파일 분할

blob.slice() 메서드는 소스 Blob의 지정된 바이트 범위에있는 데이터를 포함하는 새 Blob 객체를 만드는 데 사용됩니다. 이 메소드는 File이 Blob을 확장하므로 File 인스턴스에도 사용할 수 있습니다.

여기서 우리는 특정한 양의 얼룩으로 파일을 조각 낸다. 특히 메모리에서 너무 큰 파일을 한꺼번에 처리해야하는 경우에 유용합니다. 그런 다음 FileReader 사용하여 청크를 하나씩 읽을 수 있습니다.

/**
* @param {File|Blob} - file to slice
* @param {Number} - chunksAmount
* @return {Array} - an array of Blobs
**/
function sliceFile(file, chunksAmount) {
  var byteIndex = 0;
  var chunks = [];
    
  for (var i = 0; i < chunksAmount; i += 1) {
    var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
    chunks.push(file.slice(byteIndex, byteEnd));
    byteIndex += (byteEnd - byteIndex);
  }

  return chunks;
}

Blob을 사용하여 클라이언트 측 csv 다운로드

function downloadCsv() {
  var blob = new Blob([csvString]);
  if (window.navigator.msSaveOrOpenBlob){
    window.navigator.msSaveBlob(blob, "filename.csv");
  }
  else {
    var a = window.document.createElement("a");

    a.href = window.URL.createObjectURL(blob, {
      type: "text/plain"
    });
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
var string = "a1,a2,a3";
downloadCSV(string);

소스 참조; https://github.com/mholt/PapaParse/issues/175

여러 파일 선택 및 파일 형식 제한

HTML5 파일 API를 사용하면 파일 입력에 accept 속성을 설정하여 허용 할 파일의 종류를 제한 할 수 있습니다 (예 :

<input type="file" accept="image/jpeg">

쉼표 (예 : image/jpeg,image/png ) 또는 와일드 카드 (예 : 모든 유형의 이미지 허용을 위해 image/* )로 구분 된 여러 MIME 유형을 지정하면 선택하려는 파일 유형을 빠르고 강력하게 제한 할 수 있습니다 . 이미지 또는 동영상을 허용하는 예는 다음과 같습니다.

<input type="file" accept="image/*,video*">

기본적으로 파일 입력을 통해 사용자는 하나의 파일을 선택할 수 있습니다. 여러 파일 선택을 사용하려면 multiple 속성을 추가하십시오.

<input type="file" multiple>

그런 다음 파일 입력의 files 배열을 통해 선택한 모든 파일을 읽을 수 있습니다. 읽기 파일을 dataUrl로보기

파일의 속성 가져 오기

파일의 속성 (이름 또는 크기와 같은)을 얻으려면 파일 판독기를 사용하기 전에 수행 할 수 있습니다. 다음 html 코드가있는 경우 :

<input type="file" id="newFile">

다음과 같이 속성에 직접 액세스 할 수 있습니다.

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

lastModified (Timestamp), lastModifiedDate (Date) 및 type (File Type) 속성을 쉽게 가져올 수도 있습니다.