html drag file

html drag file debugger

by why520crazy

HTML

<body>
<div id="drag" style="border: 1px red solid;width: 500px;height: 500px">
    Drag hear
</div>

<a href="http://baidu.com">link</a>
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/28536" />
<p>
    Text File
</p>

<script>
    var element = document.querySelector("#drag");
    element.addEventListener("dragover", function (evt) {
        var items = evt.dataTransfer.items;
        var files = evt.dataTransfer.files;
        var types = evt.dataTransfer.types;
        console.log("----dragover-----");
        console.log("items.length:" + items.length);
        for (var i = 0; i < items.length; i++) {
            console.log(items[i]);
            console.log("kind:" + items[i].kind + ",type:" + items[i].type + ",items[i].name:" + items[i].name);
            console.log("items[i].name is null:" + (items[i].name == null));
        }
        console.log("files.length:" + files.length);
        console.log("types.length:" + types.length);
        console.log(types);
        var　html = evt.dataTransfer && evt.dataTransfer.getData && evt.dataTransfer.getData('text/html');
        console.log("html:"+html);
        evt.preventDefault();
    });
    element.addEventListener("dragenter", function (evt) {
        evt.preventDefault();
    });
    element.addEventListener("dragleave", function (evt) {
        evt.preventDefault();
    });
    element.addEventListener("drop", function (evt) {
        console.log("----drop-----");
        var items = evt.dataTransfer.items;
        var files = evt.dataTransfer.files;
        console.log("items.length:" + items.length);
        console.log("files.length:" + files.length);
        var files = [];
        for (var i = 0; i < items.length; i++) {
            console.log(items[i]);
            console.log("kind:" + items[i].kind + ",type:" + items[i].type);
            var f = items[i].getAsFile();
            if (f != null) files.push(f);
        }
        console.log("files.length:" + files.length);
    ...