HTML5ファイルAPIのreadAsBinaryStringでファイルサイズが大きく・内容が異なる問題の原因と対処法

HTML5のFile APIを使ってreadAsBinaryStringでファイルを読み込むと、ディスク上の実際のファイルよりもサイズが大きくなったり、内容が変わってしまうことがあります。

発生する原因

この問題は、ファイルをバイナリ文字列として読み込み、そのデータをもとにmultipart/form-dataリクエストを手動で組み立てている場合によく発生します。バイナリ文字列として扱う過程でエンコードの変換が起こり、元のバイナリデータが正確に保持されないためです。

解決策

このような場合は、xhr.send(File)を使ってFileオブジェクトを直接送信する方法を試してください。アップロードの進捗状況は、すべてのリスト項目が作成された後に発火するxhrのprogressイベントを利用して把握できます。

実装例

以下は、FormDataとXMLHttpRequestを組み合わせたアップロード関数の例です。

function display(url, files) {
    var myForm = new FormData();
    for (var j = 0, file; file = files[j]; ++j) {
        myForm.append(file.name, file);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.onload = function(e) { ... };
    xhr.send(myForm);
}

このようにFormDataにFileオブジェクトをそのまま追加し、xhr.send()に渡すことで、ブラウザが適切にmultipart/form-dataを構築してくれるため、バイナリデータの破損やサイズの不一致を防ぐことができます。