HTML5 drag-and-drop local files to display on a Web page

An object provided in the HTML5 standard for file input and output (I/O)
File:                       represents a Document object
FileList:                   represents a list of files, class array objects
FileReader                  for extracting content from files
FileWrite is                   used to write a class tolerance to a file.

These objects need to be  accessed and retrieved through E.datatransfer in the H5 drag event

The complete results are as follows:

The Data URL gives us a clever way to "embed" the image into HTML. Unlike the traditional way of using img tags to refer pictures on a server to a page, in the Data URL protocol, the picture is converted to a base64 encoded string and stored in the URL, labeled Mime-type.

<! DOCTYPE html>

Document.ondragover = function (e) {e.preventdefault ();

The default behavior is only blocked in OnDragOver to trigger OnDrop instead of OnDragLeave
}; Document.ondrop = function (e) {e.preventdefault ();

Prevent Document.ondrop from default behavior * * Open a dragged picture in a new window
};
/* Drag the source object-----A picture of the client */* Drag the target object-----Div#container If the picture is released above this element, it needs to be displayed in the */
Container.ondragover = function (e) {e.preventdefault ();    }; Container.ondrop = function (e) {console.log (e.datatransfer);
Chrome is displayed incorrectly here
var list = E.datatransfer.files;        var f = list[0];//Console.log (f); 　　　　　　var reader = new FileReader (); Reader Object
Reads the contents of the specified file as a "data url"
Reader.readasdataurl (f);
The onload event is triggered when the client file reads complete reader.onload = function () {
Console.log (Reader.result);            var img = new Image ();            IMG.SRC = Reader.result; Container.appendchild (IMG);

}    }; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</script></body>

　　

The pits encountered are as follows: Chrome displays errors

HTML5 drag-and-drop local files to display on a Web page