JavaScript
ファイルAPI、BlobおよびFileReaders

構文

• reader =新しいFileReader（）;

パラメーター

備考

文字列としてファイルを読み込む

あなたのページにファイルが入力されていることを確認してください：

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

次にJavaScriptで：

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として読み込みます

Webアプリケーション内のファイルの内容を読み取るには、HTML5 File APIを使用します。まず、 type="file"入力をHTMLに追加します：

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

次に、ファイル入力に変更リスナーを追加します。この例では、JavaScriptを使用してリスナーを定義していますが、input要素に属性として追加することもできます。このリスナーは、新しいファイルが選択されるたびにトリガーされます。このコールバック内で、選択されたファイルを読み込み、選択したファイルの内容で画像を作成するなどの操作を実行できます。

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を使用してチャンクを1つずつ読み取ることができます。

/**
* @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 ）で区切って複数のMIMEタイプを指定するか、すべてのタイプの画像を許可するためにimage/*ワイルドカードを使用すると、選択したいファイルのタイプを制限する。画像や動画を許可する例を以下に示します。

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

デフォルトでは、ファイル入力によってユーザーは1つのファイルを選択できます。複数のファイルを選択できるようにするには、 multiple属性を追加するだけです：

<input type="file" multiple>

ファイル入力のfiles配列を使用して、選択したすべてのファイルを読み取ることができ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）の属性を簡単に取得することもできます。