FC2ブログ

デスクトップからドラッグ&ドロップ

デスクトップからドラッグ&ドロップ

ウィンドウのdropイベントと
dragoverイベントのみ、イベントハンドラを設定し
ブラウザーでのデフォルトアクションが動作しないようにする

evt.preventDefault();
のとこが該当


次に、デスクトップからの画像のドロップについて

デスクトップからファイルがドロップされると
dataTransferオブジェクトのfiles配列へ
ドロップされたファイルのオブジェクトが入る

今回は、画像ファイルのみを対象にした

ソースは
var fileList=evt.dataTransfer.files;
//ドロップされたファイル数
for(var i=0;i//画像ファイルの場合のみ処理
if(window.FileReader && (fileList[i].type.indexOf("image/")==0)){

これの解説
まず、files配列を使いやすくするため
変数fileListへ格納

あとは、forでドロップされたファイル数だけ処理

ドロップされたファイル数は
fileList.lengthで求めれる
これは、fileListは配列変数だから
lengthプロパティで求めれるから

画像ファイルの場合、ファイルオブジェクトのtypeプロパティが
image/
の文字表列で始まる

なので、typeプロパティの文字列を
indexOf()
で調べて
image/
が先頭にあるなら処理
とすればいい

ソースにすると
if(window.FileReader && (fileList[i].type.indexOf("image/")==0)){
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック