HTML5 file Drag

HTML5 the new file API, you can get the name, file size, type, and so on, you need to first on the DOM element to drag and drop event binding
Related APIs

To get the node first, bind the event dragged to the node to change the mouse shape

var draghere = document.queryselector ("#draghere");
Draghere.addeventlistener ("DragOver", function (e) {
E.preventdefault ();
E.stoppropagation ();
E.datatransfer.dropeffect = "Copy";
});

When the mouse is loosened, then bind the drop event and use Event.dataTransfer.files to get a list of files

Draghere.addeventlistener ("Drop", function (e) {
E.preventdefault ();
E.stoppropagation ();
var filelists = e.datatransfer.files;
}

After you get to the specified file, and then get the file name and file size, you can determine whether to continue the operation by this information

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

If you need to get the contents of a file, you first have to determine whether the file is loaded, and then use the FileReader class's Readastext (file) method to read files
Get content from Reader's Result property

var reader = new FileReader ();
Reader.onloadend = function (e) {
if (e.target.readystate = = Filereader.done) {
Get file Contents
var filecontent = Reader.result;
}
}
Reader.readastext (file);

Small sample

Drag the file to the Web page, determine whether to read the content based on the file name and type, and then use the powerful online editor codemirror to show the results
Codemirror supports vim and Emacs, as well as example sublime Text, which also supports a number of shortcut keys.

Online sample