HTML5 はローカル ファイルにアクセスする例を実装します_html5 チュートリアル スキル

前回の記事では、ドラッグ アンド ドロップ機能のデモ、ページ コンテンツ編集可能なデモ、ローカル ストレージ機能のデモなど、いくつかの HTML5 の例を紹介しました。 今日は、FileReader の使用方法を示す簡単なアプリケーションを紹介します。FileReader は HTML5 で提供されるファイル操作 API です。

私が以前に書いた HTML 5 の例を見ていたとき、私は、これらの新しい HTML5 機能をより斬新な方法で実践するために、シンプルだが適用可能な例を作成することを考えていました。私の目標は、これらの HTML 5 API を単にデモンストレーションすることではなく、サンプルを使用して、これらの API を実践的かつ革新的な方法で実際に実装する方法を開発者に示すことです。

HTML5 では、Web ページからローカル ファイル システムにアクセスするのが非常に簡単になり、File API を使用します。このファイル仕様は、Web アプリケーションでファイル オブジェクトを表す API を提供し、それらを選択して、その情報にプログラム的にアクセスできます。このファイル API には以下が含まれます:
ローカル システムで選択された個々のファイルで構成される配列を表す FileList シーケンス。ファイルを選択するためのユーザー インターフェイスは、 を呼び出すことで実装できます。
生のバイナリ データを表す Blob インターフェイス。Blob オブジェクトを通じて、内部のバイト データにアクセスできます。
ファイル インターフェイス。ファイル名、ファイル タイプ、ファイル データ アクセス アドレスなど、ファイルの読み取り専用属性情報が保存されます。
ファイルを読み取るためのメソッドと、ファイルの読み取り結果を取得するためのイベント モデルを提供する FileReader インターフェイス。
この仕様でエラー条件を定義するために使用される FileError インターフェイスと FileException オブジェクト。
この例の使用方法: この例では、アートボードを指定しました。ローカル ファイル システムからそこに画像をドラッグすることも、ファイル選択ボックスを使用して画像を選択することもできます。この例では、画像ファイルのみを選択してください。ファイル フィルタリングとファイル タイプ チェックは追加していません。 HTML5 を完全に実装しているブラウザはないことに注意してください。この例は、Firefox 3.5 以降など、HTML5 をサポートするブラウザで実行する必要があります。

ファイル API を実装する主なメソッドは以下のように非常に簡単です:

コードをコピー

コードは次のとおりです。

function imageSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
scan.innerHTML = [''].join(”); 🎜>ドキュメント。getElementById('thumbs').insertBefore(span, null);
})(f);
関数dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.preventDefault();


[ondrop イベントを配置する ] を選択します:

コードをコピーします


コードは次のとおりです。

この例では、ローカル ファイルをアートボードにドラッグしているだけですが、次のようになります。 File API がいかにシンプルで強力な機能であるかがわかります。