ドラッグ＆ドロップ
File APIを使って任意のローカルファイルを読むためには、ユーザが明示的にWebアプリケーションに対してファイルを「読み込ませる」というアクションが必要になります。
現在それらのアクションは、ファイル選択フォーム(<input type="file">)を用いるか、ドラッグ&ドロップを受け付けるか、の2つに限られています。このデモンストレーションでは、くじら(MOGUTARO)の大きく開いた口に対して、ファイルをドラッグ&ドロップすることができます。
以下に示すのは、ファイルをドラッグ＆ドロップによって受け取るためのコードを簡略化したものです。
dragenter・dragover・dropのイベントを制御することで実現しています。dragenter、dragoverでは、デフォルトのイベント処理をキャンセルしています。これは、デフォルトではブラウザはドラッグ&ドロップを受け付け「ない」ため、そのデフォルト操作をキャンセルする必要があるためです。ondropイベントの処理において、ファイルの読み込みとそれに続く処理を実現しています。
$("#mouthOfWhale")
.on("dragenter", function(e) { // dragenter時 の ネイティブイベント無効化
e.preventDefault();
})
.on("dragover", function(e) { // dragover時 の ネイティブイベント無効化
e.preventDefault();
})
.on("drop", function(e) { // drop時 の イベントのバブリング無効化
e.stopPropagation();
/*
ondropイベントのコールバック
ファイル形式の振り分け
*/
});
ファイル形式の振り分け
ドラッグ＆ドロップされたファイルはondropイベントから取得できます。さらに取得したファイルからファイルタイプを取得します。ファイル形式の振り分けには、このファイルタイプから判定、処理分岐させています。
なお、jQueryを使用しているため、e.originalEvent.dataTransfer.filesから取得しています（jQueryは、独自のイベントオブジェクトでオリジナルのイベントをラップするためです）が、ネイティブのコードの場合は、e.dataTransfer.filesからの取得となるのでご注意ください。
// e.originalEvent.dataTransfer.files に対象のファイル(FileList)がセットされる
var files = e.originalEvent.dataTransfer.files;
// FileListからFileを取得する
var file = files[0] || null;
// ファイルタイプを取得する
var fileType = (file && file.type)? file.type: '';
// テキストファイル判定
if (fileType.indexOf('text/') === 0) {
processTextFile(file);
}
// 画像ファイル判定
else if (fileType.indexOf('image/') === 0) {
processImageFile(file);
}
// 動画ファイル判定
else if (fileType.indexOf('video/') === 0 &&
/probably|maybe/.test($('#tv')[0].canPlayType(fileType))) {
processVideoFile(file);
}
// 音楽ファイル判定
else if (fileType.indexOf('audio/') === 0 &&
/probably|maybe/.test($('#audioPlayer')[0].canPlayType(fileType))) {
processAudioFile(file);
}
// etc file
else {
processOtherFile(file);
}
canPlayType(type)による判定
上のコードで使用しているcanPlayType(type)は、各ブラウザがそのメディアファイルを再生することができるかどうかを判定します。再生可能な場合は「probably」、再生できると確証を得られない場合は、「maybe」、再生不可の場合は「''」がリターンされます。
メディア要素を扱う際には、ブラウザがどのフォーマットのファイルをを再生できるかというのも注意が必要です。IE10の場合、音楽ファイルであれば MP3 や AAC、動画ファイルであれば H.264形式でエンコードされたMPEGファイルが再生可能です。
