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支持VIM和EMACS， 还示例Sublime Text, 连它的快捷键也支持不少。。

参考链接