ローカルファイルにアクセスするメソッドの HTML5 実装-H5 チュートリアル-php.cn

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

不言

リリース： 2018-06-12 11:59:58

オリジナル

6446 人が閲覧しました

この記事では、主に 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 実装

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