HTML5手習い

Fileオブジェクトの取得 

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
File APIを使用して、input要素から指定されたファイルについて、ファイル種別やファイルサイズといった基本的な情報をchangeイベントハンドラから取得する方法について説明します。
講師:
06:44

字幕

このレッスンではユーザーの ローカル環境にあるファイルを HTML5 アプリケーションから 使用する為の File API を使用して ファイルの基本的な情報を取得する為の 方法について説明します それではアセットから file.html というファイルを テキストエディタと Google Chromeで 開いて下さい Google Chrome で HTML を開くと こちらのようにグレーで塗りつぶされた キャンバスのエリアが表示されますが こちらはこのレッスンでは使用しませんので 気にしないで下さい HTML5 アプリケーションでは セキュリティ上の問題から 通常のネイティブアプリケーションのように ファイルのパスを使用してファイルを オープンするということはできません HTML5 アプリケーションから ファイルをオープンする為には 必ずユーザーに直接ファイルを 指定してもらう必要があります ユーザーにファイルを 指定してもらう為の方法としては 今回のサンプルのように この input 要素を使用して ユーザーにファイルを指定してもらうか またはドラッグ&ドロップを 利用する必要があります 今回は input 要素を使っていきます input 要素にこちらのように type="file" と指定しておくと こちらの左側の Chrome に見られるように ファイルをオープンする為の ダイアログを開けるボタンが配置されます またこちらのように multiple という 属性をつけると 複数のファイルを同時に オープンできるようになります 今回は multiple を指定しておきます multiple を指定している為 Ctrl や Mac ですと Command キーを押しながら ファイルをクリックすると このように 複数の選択をすることが可能となります それでは実際に JavaScript から ファイルの情報を取得してみましょう まずはこちらの input 要素を dom オブジェクトとして取得します input という変数に格納することにしましょう input = document.getElementById の id は files となっていますので  files これで取得はできました そして input 要素に対して ユーザーがファイルを指定したー タイミングで処理を記述する為には input 要素の ChangeEvent を使用します input addEventListener の change そしてコールバック 関数を指定します 指定されたファイルは input 要素の files という属性ー プロパティで取得することができます こちらの取得された files という プロパティは ファイルリストというデータ型になっており 配列と似たように添え字を付けて 複数のファイルを― 扱うことが可能となります このファイルリストというデータ型は JavaScript の Array と 非常に似ているのですが Array とは異なるデータ型ですので 例えば forEach などのメソッドを 使うことはできません それではひとまず console.logで files の中身を取得できているのかどうか 確認してみましょう ブラウザで console.log を開きます Mac の方は Command+option+I Windows の方は Ctrl+Shift+I です そして HTML をリロードして こちらの「ファイルを選択」のボタンから ファイルを選択してみます 例えばこちらの画像を選択すると このように FileList オブジェクトが 取得できていることが分かります 今回選択したファイルは一つなので Length は1となっています それでは実際にファイルリストの具体的な中身をダンプしてみましょう ファイルリストは Array ではないので ループさせる為には 明示的にこのように基本的に for 文で回す必要があります そして input の files の length を上限としてループを回します ここで各 files の中に入っている オブジェクトをダンプしてみましょう 因みに この files の中に入っている 各要素は File というデータ型になります 再度ダイアログをオープンして 選択すると このように for 文の真ん中に比較を 入れるのを忘れていましたね これでリロードして もう一度 HTML を開き直します これで 再度 コンソールを開いて ファイルを選択します するとこのように各ファイルの情報が 取得できました File というデータ型には ファイル名 name や size ファイルのサイズが バイト数で格納されています またこちらに type というプロパティがあり こちらにファイルの MIME タイプが 記述されています 画像ファイルですと このように image/jpg や image/png といった形で type 属性が記述されます 他の三つのファイルも選択して 再度やってみましょう するとこのように text/html HTML の場合は text/html イメージの場合は image/jpeg そしてテキストファイルの場合は text/plain というように ファイルの種別を正しく ブラウザが認識してくれています このレッスンでは File API を使用して ファイルの基本的な情報を取得する為の 方法について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。