H5 enable uploading of local images or files

Let's start with a little demo you learned today:

<! DOCTYPE html>{margin:0; padding:0;        }. myimg {width:200px;            } #imgs {width:500px;            height:500px; Background-Color:cornsilk;        margin:50px Auto; }    </style>//Disable browser off default behavior    functionAllowDrop (e) {e.preventdefault (); }    //called when drag-and-drop ends:    functiondropimg (e) {//Disable browser off default behaviorE.preventdefault (); //data is the acquired file and can only be obtained in OnDrop        vardata =E.datatransfer.files; //when getting multiple files, traverse the file to determine if the file is of the type we requested and make the processing         for(vari = 0; i < data.length; i++) {            //determine the file type, indexOf () result false is-1, really 0            varMyType =Data[i].type; Console.log (Mytype.indexof (' Image ')); if(Mytype.indexof (' image ') = = = 0) {                //FileReader is a method encapsulated in HTML5 that reads a file into memory and reads the data in the file                varReader =NewFileReader (); //reads the dataurl of the dragged file, with no return value. Reader.readasdataurl (Data[i]); //triggered when a file is read successfullyReader.onload =function () {                    //This.result base64 decoding for the current file                    //Console.log (this.result);                    //Create an IMG node and add it to the current box                    varimg = document.createelement ("img"); IMG.SRC= This. Result; Img.classname= "Myimg"; document.getElementById ("IMGs"). appendchild (IMG);                }; //triggered whenever a read is successful, to eject an error or to upload dataReader.onloadend =function () {                    //if the upload error                    if(reader.error) {alert (reader.error); } Else {                        //can interact with the server's uploads                    }                }            } Else {                //if the incoming non-picture formatAlert ("Please upload the picture! ");    }} console.log (data); }</script></body>
Effect everyone can try, each step of the comments are also written. Here's a concrete look:
Because the div here is the equivalent of a dragged object, the effect we want to achieve is that the image is rendered when the picture is dragged in. The default behavior when the browser interprets the image is to parse the image and display it. This is obviously not the effect we want. So you need to disable the default behavior of the browser for the current event is also: Preventdefault ();
Here is the function to write when the picture is put, and here is another point. Is HTML5 in the FILEAPI, provides us with great convenience.
According to the results we printed out:
We can see, according to DATATRANSFE.FILESR we can see the selected file list, interested students can be specific Baidu, I do not introduce in detail here.
HTML5 also provides a filereader interface for reading a file into memory and reading the data in the file.
var reader = new FileReader ();
　　
There are a total of four methods and six events for this interface:
? readasbinarystring (file): Read file binary
? readasdataurl (file): Read file Dataurl
Readastext (file,[encoding]): Read file as text
? About (None): Interrupt file Read
===================================================
Onabort: Triggered when read file is interrupted
OnError: Triggered when a file error is read
Onloadstart: Triggered when read file starts
? OnProgress: Always triggered when reading from a file
? onload: Triggered when reading a file successfully
Onloadend: Trigger at end of read file (both success and failure are triggered)
The above event argument E has E.target.result or this.result pointing to the read result.
drag-and-drop API: 　　 
Drag and Drop properties: Set the Dragable property of the element you want to drag to True (dragable= "true") "img element and a element can be dragged and dropped by default. 】
Drag-and-drop events: (Divided into drag-and-drop element events and target element events)
Drag-and-drop element events:
DragStart: Trigger before dragging
Drag, drag before, drag the end between, continuous trigger
Dragend, drag end Trigger
Target Element Event:
DragEnter, enter the target element trigger.
DragOver, enter the target, leave the target, and trigger continuously.
DragLeave, leaving the target element to trigger
Drop to release the mouse trigger on the target element
However, it is important to note that the default behavior (Deny drag and drop) is blocked in the DragOver and drop events in the target element, otherwise drag and drop cannot be implemented!
=======================================================================================
DataTransfer object: The data that is designed to be carried when dragging and dropping, and can be set to the DataTransfer property of the drag-and-drop event. Three properties:
Effectallowed: Set cursor style (none, copy, Copylink, Copymove, Link, linkmove, move, all and uninitialized)
Effectallowed: Set the visual effect of a drag-and-drop operation
Types: Types of data stored, pseudo-arrays of strings
? Files: Gets the external dragged file, returns a list of filelist, fileslist a Type property, returns the file types
4 Methods:
? SetData (): Set Data key and value (must be a string)
? GetData (): Gets the data, based on the key value, gets the corresponding value
? ClearData (): Clears the data stored by the DataTransfer object
Setdragimage (Imageurl,log X,long y): Set the drag-and-drop icon with the IMG element
    var dt=e.datatransfer; // the DataTransfer property    as a drag-and-drop event dt.effectallowed= ' Copy '; // set cursor style    Dt.setdata (' Text/plain ', ' hello '); // set drag-and-drop text    Dt.setdragimage (DRAGICOM,-10,-10); // Setting the drag-and-drop icon
H5 enable uploading of local images or files