Drag & Drop and File Reader

Reference:

http://www.html5rocks.com/zh/tutorials/file/dndfiles/

http://blog.csdn.net/rnzuozuo/article/details/25295899

Http://www.tutorialspoint.com/html5/html5_drag_drop.htm

This article is for personal reference only

FIle Reader

Method
Abort () Stop reading
Readastext (file, "Utf-8"), the 2nd parameter is the specified decoding format, often used to read some txt text, etc.
Readasbinarystring (file), 2 binary, can be used for AJAX submissions to the backend
Readasdataurl (file), as if it were Base64, can be used to display pictures locally

Event
triggered when Onabort interrupts
OnError triggered when an error occurs
The onload file is triggered when the read completes successfully
Onloadend Read completion trigger, regardless of success or failure
Onloadstart trigger at start of Read
OnProgress Read in

//display img in local//2 Way:filereader and Createobjecturldocument.getElementById ("Upload"). AddEventListener ("Change",function(e) {varInputfile =E.target; varFiles =G.toarray (inputfile.files); varFile = Files[0]; //Note:minimum need Ie10    //createobjecturl to display img on local    varURL = window. URL | |Window.webkiturl; varIMG =NewImage (); Img.onload=function(e) {window. Url.revokeobjecturl ( This. SRC); Document.body.appendChild ( This); } img.src=url.createobjecturl (file); //Note:minimum need Ie10    varReader =NewFileReader (); Reader.onload=function(e) {varIMG =NewImage (); IMG.SRC=E.target.result;    Document.body.appendChild (IMG); } reader.readasdataurl (file);},false);

Drag & Drop

Div to be able to drag, put a draggable= "true" property,

Div to be able to drop, just AddEventListener dragover for Preventdefault (), stoppropagation () then AddEventListener drop

Transfer value can only be a string type
"Event" is not the same reference at the time of transmission

Datatransfer.getdata is a cross-browser that can

document.getElementById ("Drop"). AddEventListener ("DragOver",function(e) {e.stoppropagation ();        E.preventdefault (); Log ("Over"); }, false); document.getElementById ("Drop"). AddEventListener ("DragEnter",function(e) {e.stoppropagation ();        E.preventdefault (); Log ("Enter"); }, false); document.getElementById ("Drop"). AddEventListener ("Drop",function(e) {//var files = e.datatransfer.files;//if drop a file from window. Type Use file update        //log (datatransfer.types);//if is file = "Files", Else domstringlistE.datatransfer.dropeffect = ' move ';//copy, link, and move        vardata = E.datatransfer.getdata ("Key");        E.preventdefault (); Log ("Drop!"); }, false); document.getElementById ("Drag"). AddEventListener ("DragStart",function(e) {e.datatransfer.setdata ("Key", "must string"); E.datatransfer.effectallowed= ' Copylink ';//None, copy, Copylink, Copymove, Link, linkmove, move, all and uninitialized.         varSpecifiedimage = document.getElementById ("Liushishi"); E.datatransfer.setdragimage (Specifiedimage,100, 100);//Para2,para3 is mouse position x, y in the target element        //e.datatransfer.addelement (specifiedimage);//this method is same with setdragimage, better use setdragimage, because can set X, yLog ("Drag"); }, false);

Drag & Drop and File Reader