HTML5文件拖拽

HTML5新增的File API, 可以获取名称、文件大小、类型等信息，需先对DOM中的Element进行拖拽事件绑定

相关API

首先获取节点，绑定拖动到该节点的事件，可以改变鼠标形状

var draghere = document.querySelector('#draghere');
draghere.addEventListener('dragover', function(e){
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
});

鼠标松开时，再绑定drop事件，使用 event.dataTransfer.files 可以获取文件列表

draghere.addEventListener('drop', function(e){
    e.preventDefault();
    e.stopPropagation();
    var fileLists = e.dataTransfer.files;
}

获取到指定的文件后，再获取文件名称和文件大小，可以由这些信息判断是否继续操作

var file = fileLists[0];
var fileName = file.name;
var fileSize = file.size

如果需要获取文件的内容，首先得判断文件是否加载,再使用 FileReader 类的 readAsText(file) 方法进行文件读取

由reader的 result 属性取得内容

var reader = new FileReader();
reader.onloadend = function(e){
    if(e.target.readyState === FileReader.DONE){
        // 获取文件内容
        var fileContent = reader.result;
    }
}
reader.readAsText(file);

小示例

把文件拖到网页中，根据文件名和类型判断是否读取其中的内容，然后使用强大的在线编辑器 CodeMirror 展示结果

CodeMirror支持VIM和EMACS， 还示例Sublime Text, 连它的快捷键也支持不少。。

参考链接

http://javascript.ruanyifeng.com/dom/dragndrop.html

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications