HTML5は、ローカルファイルにアクセスするインスタンスを実装しています

コメント：今日、私はあなたと簡単なアプリケーションを共有して、FileReaderを使用する方法を実証します。 FileReaderは、HTML5で提供されるファイル操作APIです。それを必要とする友達はそれについて学ぶことができます。

先ほど書いたHTMLの5つの例を見ると、これらの新しいHTML5機能をさらに奇妙な方法でドリルするためのシンプルだが適用可能な例を作成することを考えています。私の目標は、これらのHTML 5 APIを単に示すことではなく、例を使用して、これらのAPIを実用的で革新的な方法で実装する方法を開発者に伝えることです。

HTML5では、Webページからローカルファイルシステムへのアクセスが非常に簡単になります。つまり、ファイルAPIを使用します。このファイル仕様は、Webアプリケーション内のファイルオブジェクトを表すAPIを提供します。それらを選択して、プログラミングを通じて情報にアクセスできます。このファイルAPIには以下が含まれます。

フィルリストシーケンスは、ローカルシステムで選択された個々のファイルの配列を表します。ファイルを選択するために使用されるユーザーインターフェイスは、<input type = file> callを使用して実装できます。

元のバイナリデータを表すBLOBインターフェイスで、内部のバイトデータにアクセスできます。

ファイルインターフェイスには、ファイル名、ファイルタイプ、ファイルデータアクセスアドレスなど、ファイルの読み取り専用属性情報が含まれています。

ファイルを読み取る方法とファイルの読み取りの結果を取得するイベントモデルを提供するFilreaderインターフェイス。

この仕様のエラー生成条件を定義するFileErrorインターフェイスとFileExceptionオブジェクト。

この例の使用方法：この例では、ローカルファイルシステムから画像をドラッグアンドドロップできるアートボードを提供するか、ファイル選択ボックスを使用して画像を選択することもできます。この例では、画像ファイルのみを選択してください。ファイルフィルタリングとファイルタイプのチェックを追加しませんでした。ブラウザがHTML5を完全に実装していないことを忘れないでください。この例は、Firefox 3.5以上などのHTML5をサポートするブラウザで実行する必要があります。

ファイルAPIを実装する主な方法は、次のように非常にシンプルです。

関数ImagesSelected（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'）;

span.innerhtml = ['<img src = "'、e.target.result、 '"/>']。join（）;

document.getElementById（ 'thumbs'）.intertbefore（span、null）;

};

}）（f）;

imagereader.readasdataurl（f）;

}

}

関数dropit（e）{

ImagesElected（e.datatransfer.files）;

e.StopPropagation（）;

E.PreventDefault（）;

}

私は<td>に私のOndropイベントを配置することにしました：

<td align = left height = 105″ ondragenter = return false ondragover = return false ondrop = dropit（event）>

<出力id = thumbs> </output>

</td>

この例では、ローカルファイルをアートボードにドラッグするだけです。ただし、ファイルAPIのシンプルだが強力な機能を示すことができると思います