ローカル ファイルにアクセスするメソッドの HTML5 実装

この記事では、主に HTML5 でローカル ファイルにアクセスする方法を紹介します。必要な友達は参考にしてください。今日は、その方法を説明するための簡単なアプリケーションを紹介します。 FileReader は HTML5 で提供されるファイル操作 API です。必要な方は詳細をご覧ください。 前回の記事では、ドラッグ アンド ドロップ機能のデモ、ページ コンテンツ編集可能なデモ、ローカル ストレージ機能のデモなど、いくつかの 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 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 = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].join(”); 
document.getElementById(‘thumbs’).insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
function dropIt(e) { 
imagesSelected(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
}

ondrop イベントを に配置することにしました:

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

この例では、ローカル ファイルをドラッグしただけです中のアートボード。ただし、File API のシンプルながら強力な機能を示すことができると思います。上記がこの記事の全内容です。その他の関連コンテンツについては、PHP に注目してください。中国語のサイトです！

関連する推奨事項:

HTML5でライブビデオ機能を実装する方法

モバイル端末はH5を使用して画像アップロードを圧縮する機能を実装します

撮影するカメラを呼び出すH5のコードについて写真を圧縮して画像を圧縮します

以上がローカル ファイルにアクセスするメソッドの HTML5 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。