HTML5を業務アプリで使うための勉強会 # 4
-
- いいね！3
taknb2nch
@taknb2nch
「HTML5を業務アプリで使うための勉強会 #4」の募集を開始しました。次回のテーマは File API です。ご参加お待ちしております。 http://t.co/XXLaJ6KC69 #gdgchugoku
2013-04-05 14:56:08
パトラッシュ@中間管理職
@patorash
Blob interface。属性にsize, type。File interfaceはBlob interfaceを継承している。nameはパスを除いたファイル名。lastModifiedDateは最終更新日時。わからない場合は現在日付。えっ…。 #gdgchugoku
2013-04-11 19:21:02
パトラッシュ@中間管理職
@patorash
FileList interface。Fileオブジェクトのリストをかえす。属性はlength。ない場合は0。 #gdgchugoku
2013-04-11 19:22:15
パトラッシュ@中間管理職
@patorash
item(index)でFileオブジェクトが取れる。存在しない場合は例外とか出ずにnullを返す。 #gdgchugoku
2013-04-11 19:22:51
パトラッシュ@中間管理職
@patorash
input type="file"のファイル選択ボタンの上にファイルをドラッグ＆ドロップすると選択したことになる。知らなかった…！？確認はChromeでやった。 #gdgchugoku
2013-04-11 19:25:19
パトラッシュ@中間管理職
@patorash
input type="file" multiple ってつけると、1つのinput typeタグで複数のファイルが選択できる！？これも知らなかった！！ #gdgchugoku
2013-04-11 19:27:25
パトラッシュ@中間管理職
@patorash
復習になるけど、Drag & Drop API。イベントの抑制をしないと、ブラウザがファイルを開いてしまうので注意。 #gdgchugoku
2013-04-11 19:31:59
パトラッシュ@中間管理職
@patorash
イベント2個書くだけで、ドラッグ＆ドロップでファイルを追加とかできる。そんな面倒じゃないなぁ、これはいいね。 #gdgchugoku
2013-04-11 19:33:22
パトラッシュ@中間管理職
@patorash
FileReader interface。イベントハンドラたくさん。onloadstart, onprogress, onabort, onerror, onload, onloaded #gdgchugoku
2013-04-11 19:37:17
パトラッシュ@中間管理職
@patorash
readAsText(blob)とかを呼ぶと、イベントハンドラが呼ばれるので、そちらで処理する。 #gdgchugoku
2013-04-11 19:40:31
パトラッシュ@中間管理職
@patorash
abort()を呼ぶと読み込みが止まる（はず）。しかし、呼んだが止まらなかったらしい（ぇ。癖のあるFileReader。非同期なのに画面がロックされるらしい（ぇ #gdgchugoku
2013-04-11 19:43:51
パトラッシュ@中間管理職
@patorash
ローカルでFileReaderを使うと一瞬で終わるから、ネットワーク越しにやらないとonprogressとかほとんど見れないらしいよ。 #gdgchugoku
2013-04-11 19:49:14
パトラッシュ@中間管理職
@patorash
FileReaderSync interfaceはWebWorksで同期的にファイルを読み込むのに使う。 #gdgchugoku
2013-04-11 19:53:11
パトラッシュ@中間管理職
@patorash
if (/^video/.test(file.type)) {っていうふうに書けるんだなー。正規表現にtestメソッドとかあるんか。 #gdgchugoku
2013-04-11 20:04:31
パトラッシュ@中間管理職
@patorash
reader.onloadイベント内で、reader.resultに結果が入ってる。element.src = reder.result とかにして、imgタグのsrcに指定して画像を表示したりする。ふむー。 #gdgchugoku
2013-04-11 20:07:37
パトラッシュ@中間管理職
@patorash
非同期だけどUIスレッドでやっていることになるんかなー？FileReaderを使って2つくらいファイルを読み込んだだけでブラウザが一瞬固まったようになる。Workerスレッド使えば解決なんかな？（Workerスレッド使ったことないけど） #gdgchugoku
2013-04-11 20:20:34