ファイルをブラウザにドロップして読み込む

ブラウザにドラッグしたファイルを読み込むには、「ドラッグ＆ドロップを検出する」と同じように、dropイベントを補足し、「ローカルファイルを読み込む」と同じようにFileReaderでドロップされたデータを読み込むようにします。


下の四角にエクスプローラ/ファインダー等からファイルをドラッグすると、ブラウザにファイルを読み込みます。

---

ここにドロップして下さい。

---

---

<div id="dragAndDropSample" style="border: 1px solid #0000FF;border-radius:4px; width:300px; height:200px;" onDragOver="onDragOver2(event)" onDrop="onDrop2(event)">
ここにドロップして下さい。
</div>
<div id="info"></div>
<div id="view"></div>
<script type="text/javascript">
var info = document.getElementById("info");
var v = document.getElementById("view");
var fr = new FileReader();
function onDragOver2(event) {
    event.preventDefault();
}
function onDrop2(event) {
    var fs = event.dataTransfer.files;
    for ( var i = 0 ; i < fs.length ; i++) {
        var f = fs[i];
        info.innerHTML = "name:" + f.name + "  type:" + f.type + "  size:" + f.size / 1000 + " KB";
        if(/^image/.test(f.type)) {
            var img = document.createElement("img");
            fr.onload = function() {
                img.src = fr.result;
                v.appendChild(img);
            }
            fr.readAsDataURL(f);
        }
        if (/^text/.test(f.type)) {
            fr.onload = function() {
                v.innerHTML = fr.result;
            }
            fr.readAsText(f, "utf-8");
        }
    }
    event.preventDefault();
}
</script>

---