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 = "+file.result+"\">"
        };
        file.readAsDataURL(f);//读取地址
    }
    //获取拖动元素的信息
    function showInfo(obj){
        var s = "";
        for(var k in obj){
            s += k + ':' + obj[k] + '
'
} info.innerHTML = s; } }
script>

你可能感兴趣的:(html5,js)