ホーム > Web技術 > HTML5のドラッグ&ドロップでファイルを扱う

HTML5のドラッグ&ドロップでファイルを扱う

2012 年 2 月 1 日 コメントをどうぞ コメント

HTML5のドラッグ&ドロップのうち、OSのファイルをドラッグしてHTMLにドロップする使い方について調べました。

前回のエントリーで説明したように、ドラッグ&ドロップはドラッグ側とドロップ側に分かれていて、今回はドロップ側の実装だけで済みます。(基本的なドラッグ&ドロップの実装は、前回のエントリーを参照してください)

ファイルのドラッグ&ドロップ

ファイルのドラッグがされているかどうかは、ドラッグイベントで渡されるdataTransferオブジェクトを使って判断できます。
ファイルをドラッグ&ドロップしたとき、dataTransferオブジェクトの状態は次のようになります。

dataTransfer.types = ["Files"];
dataTransfer.files = [Fileオブジェクト];

普段MIMEタイプが格納される場所には、”Files” という文字列が入ります。
ファイルを参照するときは、dataTransfer.getData()ではなく、dataTransfer.files[0] のようにアクセスするところが違います。

function onDrop(event) {
    var files = event.dataTransfer.files;
    for (var i=0; i<files.length; i++) {
        console.log(files[i].type + ", " + files[i].name);
    }
    event.preventDefault();
}

Fileオブジェクト

Fileオブジェクトはファイルを表現したもので、ドラッグ&ドロップの他、フォームのファイル選択 <input type=”file”/> にも使われています。

// Fileオブジェクトのプロパティ
file.type = ファイルのMIMEタイプ (image/jpegなど)
file.name = ファイル名 (パスは含みません)
file.size = ファイルサイズ
// <input id="upload" type="file"> からFileオブジェクトを得る
var files = document.getElementById("upload").files;

ファイルを読み込む

ファイルの読み書きは、FileReader や FileWriter を介して行います。(現時点でFileWriterを実装したブラウザはなさそうです)

テキストを読み込む場合はFileReaderのreadAsText()を、画像などを参照する場合はreadAsDataURL()を使います。読み込みが非同期になる点に注意してください。

function onDrop(event) {
    var files = event.dataTransfer.files;
    if (files.length > 0) {
        if (files[0].type.match(/^text\/ /)) {
            previewText(files[0]);
        } else if (files[0].type.match(/^image\/ /)) {
            previewImage(files[0]);
        }
    }
    event.preventDefault();
}
function previewText(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        document.getElementById("textarea").value = event.target.result;
    };
    reader.readAsText(file);
}
function previewImage(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        document.getElementById("image").src = event.target.result;
    };
    reader.readAsDataURL(file);
}

ファイルをアップロードする

ついでにファイルをアップロードする方法も調べてみましょう。
最近のブラウザは、アップロード可能なXMLHttpRequest Level2相当の機能を含んでいるのでこれを使います。

function onDrop(event) {
    var files = event.dataTransfer.files;
    if (files.length > 0) {
        if (confirm("ファイルをアップロードしますか?")) {
            uploadFiles(files);
        }
    }
    event.preventDefault();
}
function uploadFiles(files) {
    var form = new FormData();
    for (var i=0; i<files.length; i++) {
        form.append("files[]", files[i]);
    }
    var req = new XMLHttpRequest();
    req.open("POST", "http://foo.bar/upload.php");
    req.send(form);
}

サーバ側で通常のフォームとして処理するために、XMLHttpRequestでFormDataを送信します。もし本格的にアップロードを使うときには、進捗バーや送信完了を知らせるためのダイアログを用意する必要があるでしょう。

あとがき

HTML5のWebアプリでファイルを簡単に使えることが解りました。ファイルをドロップできるWebアプリはまだ少ないので、採用すれば、おっ何だか凄いぞ!と思ってもらえるかもしれません。

File APIに関してもっと詳しく知りたい方は、W3Cのドラフトをご覧ください。

カテゴリー: Web技術
  1. コメントはまだありません。
  1. トラックバックはまだありません。

スパム投稿ではないことを確認するため、計算式の答えを半角数字で入力してください。 * Time limit is exhausted. Please reload the CAPTCHA.