JavaScript ファイル処理パート 2 - ファイル読み取り用のサンプルコード共有

前回のブログでは、Fileオブジェクトの取得方法に特に焦点を当てて、JavaScriptでのファイルの使い方を紹介しました。ユーザーがアップロードまたはドラッグ アンド ドロップによってファイルをアップロードした場合にのみ、これらのオブジェクトはファイルのメタデータを持ちます。これらのファイルを取得したら、次のステップはこれらのファイルからデータを読み取ることです。

FileReader タイプ

FileReader タイプには、ファイルからデータを読み取り、それを JavaScript 変数 に保存するという 1 つのジョブがあります。その API は、どちらも外部リソース (ブラウザの外部) からデータをロードするため、意図的に XMLHttpRequest と同じになるように設計されています。読み取り操作は非同期であるため、ブラウザーが停止することはありません。

FileReader は、ファイル データを表すさまざまな形式を作成でき、ファイルの読み取りが必要なときに返される形式を作成できます。読み取り操作は、次のメソッドのいずれかを呼び出すことで実行されます:

• readAsText() – プレーンテキストを使用してファイルのコンテンツを返します。

• readAsBinary String() – 暗号化されたバイナリデータ String を使用してファイルのコンテンツを返します。 ArrayBuffer の形式 (画像ファイルなどのバイナリ データに便利)

• readAsDataURL() – データ URL の形式でファイルのコンテンツを返します

• XHR オブジェクトの send メソッドが Http リクエストを開始するのと同じように、上記の各メソッドはファイルの読み取りを開始します。この時点で、読み取りを開始する前に、load

  イベント
をリッスンする必要があります。event.target.result は常に読み取りの結果を返します。例:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);

この例では、単にファイルの内容を読み取り、その内容をプレーンテキストとしてコンソールに出力します。ファイルが正常に読み取られた場合は onload 操作が呼び出され、何らかの理由でファイルを読み取れなかった場合は onerror 操作が呼び出されます。 FileReader インスタンスは、イベント ハンドラー のevent.target を通じて取得できます。リーダー変数を直接使用するのではなく、この方法で使用することをお勧めします。 result 属性には、読み取りが成功した場合のファイルの内容と、読み取りが失敗した場合の

エラー メッセージ

が含まれます。 データ URI の読み取り 同様の方法を使用して、ファイルをデータ URI として読み取ることができます。データ URI (データ URL とも呼ばれます) は、たとえば、読み取ったデータを表示したい場合に興味深いオプションです。ディスク イメージ ファイルの場合は、次のコードでこれを行うことができます:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

このコードは、ディスクから読み取られたイメージ ファイルをページに挿入するだけです。このデータ URI には画像のすべてのデータが含まれているため、画像の src 属性に直接渡してページに表示できます。画像をロードして、239a81c7cfe8de0f1c03d5ccc10cc746 code> に描画することもできます。 >上: <p><pre class="brush:js;toolbar:false;">var reader = new FileReader(); reader.onload = function(event) { var dataUri = event.target.result, context = document.getElementById(&quot;mycanvas&quot;).getContext(&quot;2d&quot;), img = new Image(); // wait until the image has been fully processed img.onload = function() { context.drawImage(img, 100, 100); }; img.src = dataUri; }; reader.onerror = function(event) { console.error(&quot;File could not be read! Code &quot; + event.target.error.code); }; reader.readAsDataURL(file);</pre></p> このコードは、画像データを新しい Image オブジェクトにロードし、キャンバスに描画します (幅と長さは両方とも 100 に指定されています)。 <p><code>3856173a0eceb679792f65a38e1fcb00通常、これにはデータ URI が使用されますが、どのタイプのファイルでも使用できます。ファイルをデータ URI として読み取る最も一般的な用途は、ファイルの内容を Web ページにすばやく表示することです。

ArrayBuffers の読み取り

ArrayBuffer 型

[1]

は、もともと WebGL の一部として導入されました。 Arraybuffer は限られたバイト数を表し、任意のサイズの数値を格納するために使用できます。 ArrayBuffer データを読み取る方法には、特定のビューが必要です。たとえば、Int8Array はバイトを符号付き 8 ビット整数セットに処理しますが、Float32Array はバイトを 32 ビット浮動小数点数に処理します。これらは型

配列

[2] と呼ばれ、任意の型のデータ (従来の配列など) を含むのではなく、特定の数値型を操作する必要があります。

バイナリ ファイルを処理する場合、最初に ArrayBuffer を使用すると、データをより細かく制御できるようになります。 ArrayBuffer の詳細をすべて説明するのはこのブログの範囲を超えていますが、必要なときに簡単にファイルを ArrayBuffer に読み込むことができることだけは知っておいてください。ブラウザが XMLHttpRequest を完全にサポートしている限り、ArrayBuffer を XHR オブジェクトの send() メソッドに直接渡し、生データを サーバー に送信できます (サーバー リクエストでこのデータを読み取り、ファイルを再構築します)。レベル 2[3] (IE10 や Opera12 を含む、ほとんどの最新ブラウザでサポートされています)。

以上がJavaScript ファイル処理パート 2 - ファイル読み取り用のサンプルコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。