web-dev-qa-db-ja.com

E11のJavaScript readAsBinaryString関数

このページでは http://www.html5rocks.com/en/tutorials/file/dndfiles/ 「例：ファイルをスライスします。試してみてください！」の例までスクロールダウンした場合ローカルファイルのバイトを読み取るためのreadAsBinaryStringAPIの使用が表示されます。

私はIE（私の場合はIE11）がreadAsBinaryStringをサポートしていない）を見てきました。

ポスト HTML5ファイルAPIはテキストとバイナリとして読み取られる で言及されたこのコードでさえ、IE11のreadAsBinaryStringで中断します。

スタックオーバーフローの投稿を見てきましたが、ReadAsArrayBuffer（）の使用を推奨しています。しかし、それも機能していません。未定義を返します。

私の質問は、IE11で実行する必要がある場合のオプションは何ですか？ readAsBinaryString（）のJOBを実行する別のIE互換性のあるJS関数を記述することは可能ですか？.

javascripthtml5internet-explorer
22
Dev.K.

これが私の解決策です。

var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
  if (reader.result) reader.content = reader.result;
  var base64Data = btoa(reader.content);
  //...
}
//extend FileReader
if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function (fileData) {
       var binary = "";
       var pt = this;
       var reader = new FileReader();      
       reader.onload = function (e) {
           var bytes = new Uint8Array(reader.result);
           var length = bytes.byteLength;
           for (var i = 0; i < length; i++) {
               binary += String.fromCharCode(bytes[i]);
           }
        //pt.result  - readonly so assign binary
        pt.content = binary;
        $(pt).trigger('onload');
    }
    reader.readAsArrayBuffer(fileData);
    }
}
31
Jack

@Jackの回答とコメントを組み合わせて、完全な実例を示します。

<head>セクションでは、IE11でFileReader.readAsBinaryString関数を追加するためにこのスクリプトを追加しました

if (FileReader.prototype.readAsBinaryString === undefined) {
    FileReader.prototype.readAsBinaryString = function (fileData) {
        var binary = "";
        var pt = this;
        var reader = new FileReader();
        reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            //pt.result  - readonly so assign content to another property
            pt.content = binary;
            pt.onload(); // thanks to @Denis comment
        }
        reader.readAsArrayBuffer(fileData);
    }
}

このフォールバック関数を使用する場合、target.resultには値がないため、元のスクリプトコードをわずかに変更する必要がありました。

var reader = new FileReader();
reader.onload = function (e) {
    // ADDED CODE
    if (!e) {
        var data = reader.content;
    }
    else {
        var data = e.target.result;
    }

    // business code
};
reader.readAsBinaryString(myFile);
41
Naigel

IE 11の場合、このXHRトリックを使用できます。

function blobToBinaryStringIE11(blob) {
    var blobURL = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest;
    xhr.open("get", blobURL);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.onload = function () {
        var binary = xhr.response;
        // do stuff
    };
    xhr.send();
}

Uint8Array + fromCharCodeルートより20倍高速で、readAsBinaryStringと同じ速さです。

7
ozdefir

FileReader.readAsBinaryStringは非標準の関数であり、廃止されました。

代わりにFileReader.readAsArrayBufferを使用する必要があります。

[〜＃〜] mdn [〜＃〜]

7
Jayendra Sharan

交換

reader.readAsBinaryString(blob);

で：

reader.readAsText(blob);

クロスブラウザでうまく機能します。

2
user3292624