先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法をメモ。
前回と同じ、ドラッグ＆ドロップのデフォルト動作のキャンセルやdragoverのイベントの動作のキャンセルに関しての説明は省く。
// JavaScript Document
window.addEventListener("load",function(){
//
var drop=document.getElementById("dropArea");
drop.addEventListener("drop",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
//①filesでドロップしたファイル数を取得
var filelist=event.dataTransfer.files;
//
for(var i=0; i";
}
//
}
}
//
},true);
//
drop.addEventListener("dragenter",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
drop.style.backgroundColor="#ecc";
//
},true);
//
drop.addEventListener("dragleave",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
drop.style.backgroundColor="#ccc";
//
},true);
//
drop.addEventListener("dragover",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
//
},true);
//⑤ドロップする要素と同様、windowオブジェクトもデフォルト動作をキャンセルする
window.addEventListener("drop",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
//
},true);
//
window.addEventListener("dragenter",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
},true);
//
window.addEventListener("dragleave",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
},true);
//
window.addEventListener("dragover",function(event){
//デフォルト動作をキャンセル
event.preventDefault();
},true);
},true);
目次
①filesでドロップしたファイル数を取得
前回はdropしたEventオブジェクトのdataTransferのgetData()メソッドを利用したが、ローカルからドラッグ&ドロップされたファイルは「event.dataTransfer.files」のfilesオブジェクトに配列として取得できる。
②FileReaderに対応しているチェックしつつテキストファイルかチェックする
まず、ブラウザがFileReaderに対応されているかチェックするのは、いいとして、ドラッグされたfileオブジェクトがテキストか判断するためには、ドロップされたfileオブジェクトのファイルタイプを調べる必要がある。もしファイルがテキストファイルなら処理といったif文で分岐させる。
ドロップされたfileオブジェクトのタイプを調べるには「type」プロパティがあるのでそれで調べることができる。下記参照
- テキストの場合：text/plain
- 画像（jpg）の場合：image/jpeg
- htmlの場合：image/html
③readAsTextメソッドを呼び出す
チェックが済んだら前回同様FileReaderオブジェクトを作成した後に、「readAsText」を呼び出します。
第1引数はfileオブジェクトで第2引数は文字コード。
[FileReader].readAsText( [File] , [エンコード] );
ただ、上記のメソッドを利用したからといってファイル内容が表示される訳ではなく、非同期で行われるので、正常に読み込んだときのイベントを設定する必要がある。
④読み込まれた時のイベントを設定
読み込みは「onload」イベントで知ることが出来るので、onloadのイベントのターゲットとなるFileReaderオブジェクトの「result」プロパティからテキストを取得することが出来る
event.target.result;
⑤ドロップする要素と同様、windowオブジェクトもデフォルト動作をキャンセルする
ローカルからドラッグ＆ドロップをすると、ドロップする要素以外の場所にドロップした時にブラウザ自体でもデフォルトの動作として画像やファイルなどが表示されてしまうのでwindow自体のイベントもキャンセルしておく必要がある。基本的にはドロップする要素を同じだが、最低限キャンセルするイベントは「drop」「dragover」イベントの2種類で「dragenter」「dragleave」は設定しなくてもいい。
