Drag-and-drop Realization Picture Browser preview _javascript Tips

I've just tried Chrome's drag and drop API today, and it's very simple to put a local picture in the browser to preview it. Imagine what happens when we drag a text picture to the browser, and your browser tries to open a new page and load the picture. Now I don't want the browser to help me with the pictures, and I want my drag-and-drop pictures to be immediately in my predetermined position and quickly echo, which requires two functions stoppropergation () and Preventdefault () of the event object in JavaScript. The former will block the bubbling of events, which will prevent the browser from behaving by default.

Here we define a Ignoredrag function to achieve these functions:
HTML code

var Ignoredrag = function (e) { 
     e.originalevent.stoppropagation (); 
     E.originalevent.preventdefault (); 
     } 

And then leverage the jquery binding event
HTML code

$ (' #drop '). Bind (' 
dragenter ', DragEnter). Bind (' 
dragover ', dragover). 
bind (' drop ', drop); 

It's best to use jquery to bind events because jquery helps us encapsulate the event objects so that we can use the stoppropagation and Preventdefault functions without scruple.
Define Dragover,dragenter event functions at the same time

HTML code

var dragover = function (e) { 
     Ignoredrag (e); 
   } 
   var dragenter = function (e) { 
     Ignoredrag (e); 
   } 

This must be defined, or you will still not be able to block the browser's default behavior.

Finally define the drop function, which is the function that triggers when we put the picture in the specified position.
HTML code

var drop = function (e) { 
    Ignoredrag (e); 
    var dt = E.originalevent.datatransfer; 
    var files = dt.files; 
    var fr = new FileReader (); 
    Fr.onload = function (e) { 
      var image = new Image (); 
      IMAGE.SRC = E.target.result; 
      $ (' #drop '). Append (image) 
    } 
    Fr.readasdataurl (Files[0]); 
    

This function is the key to the entire function, which uses some of the features of HTML5, DataTransfer and FileReader.
DataTransfer is an attribute of the event parameter of the drop event that contains some information about the droped file, and an array of files can be obtained by using the DataTransfer files property, which is the droped file object that can be passed through the name , Type,size gets the name, type and size of the file separately, the contents of the file are to be read with FileReader, and the instance of the FileReader object has 4 methods, of which 3 are used to read the file and the other to interrupt the reading. The following table lists these methods and their functions, noting that the function does not return the read results, regardless of whether the read is successful or not, and the result is accessed in the results property:

Readastext: The method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. This method is very easy to understand, read the file as text, read the result is the content of this text file.

Readasbinarystring: It reads the file as a binary string, and usually we pass it to the back end, which can store the file through this string.

Readasdataurl: This is the method used by the example program, which reads a file as a string that begins with data: The essence of the string is that the data Uri,data URI is a scheme for embedding small files directly into a document. Small files here usually refer to files in formats such as images and HTML.

FileReader also contains a series of event models, as shown in the following table:

Here is an additional introduction to the Drag-and-drop event, as follows:

Back to the point, read the picture through the FileReader readasdataurl function, and define the onload function on the FileReader object, when the picture is loaded, By Event.target.result get the Base64 encoded content of the file, the previous blog I have said that the data type URL can be written directly in the IMG tag src, the browser will parse, without loading from the outside, through this feature, the captured image content to the IMG tag src, and add the image object to the specified area to achieve the desired functionality.

HTML code

The above content is to use Drag-and-drop to achieve the full picture browser preview, I hope you like.