@blog.justoneplanet.info

HTML5では、ユーザが選択したファイルにJavaScriptからアクセスできるようになったヽ(*ﾟ▽ﾟ)ﾉ

■ソース

イベントハンドラが気に入らないけどまぁ。

<p ondragstart="dragstart(event)" ondragenter="dragenter(event);" ondragover="dragover(event);" ondrop="drop(event);">You drop some images, here!</p>
<div id="preview"></div>

JavaScript

グローバルに書くのが気に入らないけどまぁ。基本的な動作としてブラウザにファイルがドロップされるとブラウザはファイルを元の動作で処理しようとする。つまりJavaScriptに処理を渡すようにはなっていないので、e.preventDefault()でデフォルトのイベントを実行させないようにする。

function dragStart(e){
    //e.preventDefault();
}
function dragEnter(e){
    //e.preventDefault();
}
function dragOver(e){
    e.preventDefault();
}
function drop(e){
    var files = e.dataTransfer.files;
    for(var i = 0; i < files.length; i++){
        if(files[i].type.match(/image\/[a-z]/i)){
            var reader = new FileReader();
            var img = document.createElement('img');
            img.src   = reader.result;
            img.width = 300;
            document.getElementById('preview').appendChild(img);
            reader.onloadend = (function(img){
                return function(e){
                    img.src = e.target.result;
                }
            })(img);
            reader.readAsDataURL(files[i]);
        }
    }
    e.preventDefault();
}

Firefoxで動作確認。

Chromeについて

まだファイルの内容を読み込んだりは出来ないらしい。

Chrome has partial support for this. In the test file I’ve attached, I can select a
file via the “Choose File” button and get metadata about it: its name, size and
type. However, I cannot read the contents of the file.

「部分的にサポートしているが内容の読み込みは出来ない」とのこと。まぁ、そのうち。

■サンプル

画像ファイルを点線の中にドロップしてください。

You drop some images, here!