DataTransfer.files获取桌面文件信息实例页面

效果：

拖拽文件到下面框框：

代码：

CSS代码：

.box { width: 256px; height: 171px; border: 1px solid #ccc; background-color: #f5f5f5; }

HTML代码：

<h4>拖拽文件到下面框框：</h4>
<div id="box" class="box"></div>

JS代码：

box.addEventListener('dragover', function (event) {
    event.preventDefault();
});
box.addEventListener('drop', function (event) {
    event.preventDefault();
    // 遍历文件信息
    var files = event.dataTransfer.files || [];
    var length = files.length;
    if (length == 0) {
        this.innerHTML = '<p>没有文件</p>';
        return;
    }
    var html = '';
    for (var index = 0; index < length; index++) {
        html += '<p>类型：'+ files[index].type +'</p>';    
    }
    this.innerHTML = html;
});