JavaScript ファイル処理パート 2 - ファイル読み取り用のサンプルコード共有-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-03-13 16:49:41

オリジナル

1047 人が閲覧しました

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

FileReader タイプ

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

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

readAsText() – プレーンテキストを使用してファイルのコンテンツを返します。
readAsBinary String() – 暗号化されたバイナリデータ String を使用してファイルのコンテンツを返します。 ArrayBuffer の形式 (画像ファイルなどのバイナリデータに便利)
readAsDataURL() – データ URL の形式でファイルのコンテンツを返します
XHR オブジェクトの send メソッドが Http リクエストを開始するのと同じように、上記の各メソッドはファイルの読み取りを開始します。この時点で、読み取りを開始する前に、load
イベント

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 属性に直接渡してページに表示できます。画像をロードして、<<a href="http://www.php.cn/code/7892.html" target="_blank">キャンバス</h2>></ code> に描画することもできます。 >上: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var reader = new FileReader(); reader.onload = function(event) { var dataUri = event.target.result, context = document.getElementById("mycanvas").getContext("2d"), 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("File could not be read! Code " + event.target.error.code); }; reader.readAsDataURL(file);</pre><div class="contentsignin">ログイン後にコピー</div></div> このコードは、画像データを新しい Image オブジェクトにロードし、キャンバスに描画します (幅と長さは両方とも 100 に指定されています)。 <p><code><<a href="http://www.php.cn/code/7892.html" target="_blank">canvas</a>>通常、これにはデータ 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 サイトの他の関連記事を参照してください。