ホームページ ウェブフロントエンド H5 チュートリアル HTML5 はローカル ファイルにアクセスする例を実装します_html5 チュートリアル スキル

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

May 16, 2016 pm 03:50 PM
html5

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

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

HTML5 では、Web ページからローカル ファイル システムにアクセスするのが非常に簡単になり、File API を使用します。このファイル仕様は、Web アプリケーションでファイル オブジェクトを表す API を提供し、それらを選択して、その情報にプログラム的にアクセスできます。このファイル API には以下が含まれます:
ローカル システムで選択された個々のファイルで構成される配列を表す FileList シーケンス。ファイルを選択するためのユーザー インターフェイスは、<input type="file"> を呼び出すことで実装できます。
生のバイナリ データを表す 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 = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”); 🎜>ドキュメント。getElementById('thumbs').insertBefore(span, null);
})(f);
関数dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.preventDefault();


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




コードをコピーします


コードは次のとおりです。
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> <output; id=”thumbs”> ;</output> </td>
この例では、ローカル ファイルをアートボードにドラッグしているだけですが、次のようになります。 File API がいかにシンプルで強力な機能であるかがわかります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML入力プレースホルダー

See all articles