<style>
    #drop131029_1 {
        min-height: 150px;
        width: 250px;
        border: 1px solid blue;
        margin: 10px;
        padding: 10px;
    }
</style>

<h1 align=center>A File Preview Demo</h1>
<DIV id="status131029_1">Drag the files from a folder to a selected area ...</DIV>

<DIV id="drop131029_1">Drop files here.</DIV>
<DIV id="list131029_1"></DIV>

<script type="text/javascript">
    // 출처는 아마도 http://jsfiddle.net/JtJ5N/
 // 개조를 하긴 했는데.. 그냥 그래요..

(function () {
    function g(b, a, d) {
        if (b[p]) b[p](a, d, !1);
        else if (b[q]) b[q]("on" + a, d);
        else b["on" + a] = d
    }
    var p = "addEventListener",
        q = "attachEvent",
        k = "preventDefault",
        h = window,
        n = document,
        e;
    Function.prototype.bindToEventHandler = function () {
        var b = this,
            a = Array.prototype.slice.call(arguments);
        return function (d) {
            d = d || h.event;
            a.unshift(d);
            b.apply(this, a)
        }
    };
    String.prototype.r = function () {
        var b = arguments,
            a = b.length,
            d = this,
            c;
        for (c = 0; c < a; c += 2) d = d.replace(b[c], b[c + 1]);
        return d
    };
    e = function (b) {
        return n.getElementById(b)
    };
    var r, l, m;
    h.FileReader ? g(h, "load", function () {
        function b(a) {
            if (a[k]) a[k]();
            return !1
        }
        r = e("status131029_1");
        l = e("drop131029_1");
        m = e("list131029_1");
        g(l, "dragover", b);
        g(l, "dragenter", b);
        g(l, "drop", function (a) {
            a = a || h.event;
            if (a[k]) a[k]();
            var b = a.dataTransfer.files;
            for (a = 0; a < b.length; a++) {
                var c = b[a],
                    e = new h.FileReader;
                g(e, "loadend", function (a, c) {
                    var e = this.result,
                        f = n.createElement("div");
                    f.innerHTML = "Loaded : {filename} size {filesize} B".r(/{filename}/, c.name, /{filesize}/, c.size);
                    m.appendChild(f);
                    f = m.getElementsByTagName("div").length;
                    r.innerHTML = f < b.length ? "Loaded 100% of file {fileNumber} of {fileslength}...".r(/{fileNumber}/, f, /{fileslength}/, b.length) : "Done loading. processed {fileNumber} files.".r(/{fileNumber}/, f);
                    f = n.createElement("img");
                    f.file = c;
                    f.src = e;
                    m.appendChild(f)
                }.bindToEventHandler(c));
                e.readAsDataURL(c)
            }
            return !1
        })
    }) : e("status131029_1").innerHTML = "Your browser does not support the HTML5 FileReader."
})();

</script>

A File Preview Demo

http://pba.kr