HTML5 ファイル API を使用してローカル ファイル (画像、PDF など) を読み取る例

HTML4 の時代では、Web ページ上にユーザーのローカル画像を表示したい場合、ユーザーはまず画像をサーバーにアップロードし、次にサーバーから提供された画像アドレスに従って画像をダウンロードする必要があります。ウェブページに表示されます。このやり取りには、この画像のトラフィックの少なくとも 2 倍のコストがかかり、この画像を保存するためにサーバーが費やしたリソースや、ユーザーが間違った画像をアップロードする不当なコストは言うまでもありません (HTML4 時代では、ユーザーは [アップロード後] を選択するため)画像の場合、多くの場合、画像のファイル名のみが表示され、プレビューによってその画像がアップロードしたい画像であるかどうかをさらに確認することはできません。

HTML5 は、ブラウザだけでローカル (実際にはリモートの場合もあります) ファイル (主に画像) をレンダリング、読み取り、処理できる新しい方法を提供します。これらはすべて HTML5 ファイル API を通じて行われます。成し遂げる。

1 つ目はデータ構造です。HTML5 ではファイルを表すファイル オブジェクト タイプが定義されており、各ファイル オブジェクトがファイルに対応します。ファイル オブジェクトには、名前、サイズ、タイプの 3 つの属性があります。 name はパスのないファイル名、size はバイト単位のファイル サイズ、type はファイルの MIME (image/jpg など) です。

ファイル オブジェクトは単独で存在するのではなく、FileList という名前の配列内に配列の形式で存在します。では、この FileList 配列を取得するにはどうすればよいでしょうか?現在、HTML5 で FileList を取得するには 2 つの方法があります。1 つはファイル タイプの入力によるもの、もう 1 つはドラッグ アンド ドロップ操作のドロップ イベントによるものです。

ファイルタイプを入力して FileList を取得する

<input id=file-input type=file />

または、複数のファイルを選択できるようにする HTML5 の新しい multiple 属性:

 <input id=file-input type=ファイル複数 />

一般に、ユーザーがファイルを選択した後、ファイルの読み取りなどの次のステップをすぐに実行できるように、onchange イベントを input:file に添付します。

 //ネイティブ jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files }//jquery version$('#file-input; ').on('change', function() { var fileList = this.files;});

まず、ドラッグ アンド ドロップの領域を設定します。

 <div id=dropbox style=width: 200px;height: 200px;></div>

さらに、drop イベントをトリガーするには、dragenter イベントとドラッグオーバー イベントのデフォルトの動作を防止する必要があります。

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, lagenter, false);dropbox.addEventListener(dragover,ragover, false);dropbox.addEventListener(drop,drop, false);functiondragenter(e) { e.stopPropagation(); e.preventDefault();}関数ドラッグオーバー(e) { e.stopPropagation(); e.preventDefault();}

次に、drop イベントのコールバックで fileList を取得できます。

関数ドロップ(e) { e.stopPropagation(); e.preventDefault(); var ファイル = dt.files; }

HTML5 は、FileReader と ObjectUrl という 2 つのソリューションを提供します。

まず、FileReader オブジェクトをインスタンス化する必要があります。

 var リーダー = 新しい FileReader();

FileReader を使用してファイル オブジェクトを読み取るのは非同期プロセスです。まず、FileReader のロード イベントのコールバックを設定して、ファイル オブジェクトのデータを読み取った後にさらにどのような操作を実行するかを FileReader に指示する必要があります。

 Reader.onload = function(e) { document.getElementById(image).src = e.target.result;

上記のコードの意味は、FileReader が画像データを読み取った後、そのデータ (DataUrl) を src 属性に入れることです。

最後に、FileReader のさまざまなメソッドを使用して、ファイル オブジェクト データを読み取った後に保存するために使用するデータ形式を決定し、読み取りを実装します。

1. readAsArrayBuffer(file): ファイル オブジェクトを読み取り、ArrayBuffer オブジェクトとして保存します (ArrayBuffer オブジェクトが何であるかはまだわかりませんが、効率的なデータ アクセスのために生成されたデータ構造であるはずです)。
2. readAsText(file [, 'UTF-8']): 一般テキスト モードでファイル オブジェクトを読み取ります。2 番目のパラメーター (オプション) を使用して文字エンコーディングを指定できることに注意してください。
3. readAsDataURL(file): ファイル オブジェクトを読み取り、data: URL 形式の文字列として保存します。

ObjectURL は、ファイルへの一時パスに相当します。この一時パスは、ローカル ブラウザで使用する場合には、通常の URL と何ら変わりません。

例として、ページ上にローカル画像を表示する場合を考えてみましょう。

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

この時点で、src は次のようになります: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

この src を使用すると、ブラウザーがローカルで画像を読み取ることができます。

FileReader を使用して画像の Base64 エンコードを生成し、それを src に入れる場合と比較して、このソリューションのパフォーマンスは大幅に向上しています。

File オブジェクトを読み取るためのこれら 2 つのソリューションを比較すると、FileReader はファイルのアップロードに適しており、ObjectURL はブラウザ内で直接操作し、キャンバスを使用してスクリーンショットを撮ったり、画像圧縮を実行したりするなど、操作後に処理されたデータをアップロードするのに適しています。 。もちろん、これはすべて互換性に依存します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。