それに加えて、ファイルの中身を取り出す機能をもっています。例2:ダイアログボックスによる属性の取得(this)に加える事項につき説明します。)ですが、正常完了以外のケースを作成するのが面倒なので、ここでは、正常完了することを前提にしています。読込方法を、ここでは、readAsText:テキストファイル(文字データ)の読込みreadAsDataURL:画像ファイルの読込みに限定しています。選択されたファイルの全文を表示します。このプログラムでは次のような制約があります。text/plainファイルの文字コードと、行Hでの文字コードが一致しないと文字化けします。ファイルは文字化けします。文字コードが一致していても、改行コードが無視されます。text/html表示ファイルで記述しているリンク先や画像のURLが相対指定だと、このページ(プログラムのあるページ)からの相対指定だとされ、正しく動作しません。表示ファイルに、このページと同じstyleやscriptがあると、表示ファイルでの指定が優先され、このページの画面にまで影響してしまいます。image/xxx対象ファイルの画像サイズのままで表示される(縮小されない)ので、画面からはみ出してしまうことがあります。上記以外のファイルは開けません。"対象以外のタイプです。class="red">ここに属性が表示されます。id="内容表示場所">ここにファイル内容が表示されます。</div>表示量が多いので、1ファイルごとにアラームを出して表示します。ここに属性が表示されます。ここにファイル内容が表示されます。呼び出されます(行A)。選択ファイルの個数で、行C以降で個々のファイル名やタイプが得られます。ここまでは、fileListと同じです。生成し、ファイルの内容を非同期で取得することができます(readerの名称は任意ですが、一般に「reader」が使われています)。:次に改行コード以外の任意文字が続くならば真、そうでなければ偽になります。とき」という意味になります。画像ファイルのとき」となります。実行する」という関係です。実行以前にイベントが発生したときの処理を記述しておくことになります。行Jと行Lも行Fと行Hの関係と同じです。非同期アクセスを標準にしているからです。"utf-8");とは、「「ファイル」を文字コード(utf-8)のテキストデータ(AsText)として読込み、その内容をオブジェクト(reader)に入れる」という意味です。ここで指定した文字コードとファイルの文字コードが異なると文字化けします。事前に文字コードを知っておく必要があります。変数名にするのが通常です)。event.target.result;」とすると、「テキスト内容」にはプレーンテキストの改行もそのままの状態で入っています。テキスト内容;としたとき、自動的に改行が無視されてしまいます。行LのreadAsDataURLは、DataURL形式で読み込みます。DataURL形式とは画像や音声データのURLなど(画像そのものではない)の情報です。したのでは、画像は得られません。行K1~K5の処理が必要です。K1では<div>-</div>の要素を、K2では<img>要素を生成します。(ファイルのurl)を<img>要素に組み込み、K4で<div>の内部(child)に<img>要素を組み込みます。src="画像ファイルのURL"></div>となり(これは正確な記述ではありません)、すなわち画像が取り出されます。表示される画像は、ペイントで開いたような画像です。定義しておく必要があります。HTMLを記述したのと同じ状況になります。リンク先や画像など他のファイルのURLが記述されている場合、それが相対指定だと、このページ(プログラムのあるページ)からの相対指定だとされるので、正しく動作しません。styleやscriptがあり、このページと同名の指定があると、ファイルでの指定が優先されるので、このページ画面の他の部分にまで影響してしまいます。ローカル画像ファイルの表示(簡素化)一つのローカル画像ファイルだけを対象にするときは、かなり簡素なスクリプトになります。<div>は何でもよい。