HTML5拖拽本地文件

<script>
    /*
DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。
    */


</script>

<div id="div"></div>
<div id="info"></div>

<script>
    /*
            1.拖放（drag/drop）
            2.拖放开始
                ondragstart:调用了一个函数
                drag(event),规定了被拖动的数据
            3.设置拖动数据：
                setData():设置被拖动数据类型和值
            4.放入位置
                ondragover:事件规定在何处放置拖动的数据
            5.放置
                ondrop:当放置被拖动数据是，触发的事件

        */

var $ = function(select){return document.querySelector(select)};
window.onload = function(){
    var div = $('#div');
    var info = $('#info');

    div.ondragover = function(e){
        e.preventDefault()//阻止默认事件
    }


    div.ondrop = function(e){
        e.preventDefault()//阻止默认事件
        showInfo(e)//显示信息
        var f = e.dataTransfer.files[0];//获取信息
        var file = new FileReader()//新建FileReader  用来读取文件
        //文件读取完成后
        file.onload = function(e){
            div.innerHTML = "<img src=\""+file.result+"\">"
        };
        file.readAsDataURL(f);//读取地址
    }
    //获取拖动元素的信息
    function showInfo(obj){
        var s = "";
        for(var k in obj){
            s += k + ':' + obj[k] + '<br/>'
        }
        info.innerHTML = s;
    }
}








    </script>