Chrome can drag images from other browsers

Chrome is always on the front line of technology, and it will always be amazing. Recently, when I was doing a drag/drop upload image function, I found that Chrome could drag images directly from other browsers.

Common drag events. Each browser identifies the files dragged from a local disk.

The drag and drop event of HTML5 makes Web applications see two points. However, in common drop events, most browsers only support dragging from the disk of the local computer to the browser. For example:

JS Code:

// Obtain the divvardu =du ('dragupload') to trigger the drop event; // obtain the function $ (ID) {returndocument. getelementbyid (ID);} // display the image dragged to the webpage to functiondisplayimage (container, dataurl) {varimg = document. createelement ('img '); IMG. src = dataurl; container. appendchild (IMG);} // The main processing function du. addeventlistener ("Drop", function (e) {e. stoppropagation (); E. preventdefault (); Du. classname = DU. classname. replace ('drag-over', ''); // gets an array varfiles = E. datatransfer. files; handlefiles (Files) ;}, false );

Interface effect:

We drag an image from the computer disk to the webpage.

You can drag an image from any location on your computer to a webpage, regardless of Firefox, chrome, opera, or IE. However, chrome can not only drag images from a computer disk, but also recognize images dragged in from other browsers.

Chrome supports drag-and-drop images from Firefox and Safari.

Drag an image from Firefox to chrome:

Surprise!

Test results:

Dragging from IE to chrome is invalid.

Dragging from opera to chrome is invalid.

Drag from safari to chrome

Drag from Firefox to chrome

It is invalid to drag from any browser to non-chrome

Dragging from chrome to chrome is invalid.

Note: Although chrome can recognize images dragged in from other browsers, it cannot recognize images dragged in from Chrome, for example:

To make it easier to see clearly, we can output messages to the console. Under normal circumstances, we can get the name attribute of each drag-and-drop file to know the drag-and-drop file name, for example:

Functionhandlefiles (Files) {for (vari = 0; I <files. length; I ++) {varfile = files [I]; varimagetype =/image. */; If (! File. type. match (imagetype) {continue;} varreader = newfilereader (); reader. onload = function (e) {displayimage({'bd'},e.tar get. result);} // convert the file to a URL. The image can be SRC reader. readasdataurl (File); // print the file name to the console. log (file. name );}}

Get Drag and Drop File Name

Then let's drag and drop to see what file. Name is, first drag and drop from the computer disk

File. Name is the file name, including the extension name.

Drag and Drop from other web pages to chrome (because drag and drop from web pages to other browsers does not recognize drag and drop files, you can only use chrome for testing)

The from Firefox file name is not a real file name on the server, but a temporary file name.

The from Safari file name is the actual file name of the image on the server.

How do I identify the drag-and-drop files?

Just now, we can see that the image file name dragged from Firefox to chrome is like a temporary file name, but since the image dragged from Firefox is the end of the BMP extension name, how can we get the file type, what is the real extension name?

First, we need to determine whether it is an image type.

Functionhandlefiles (Files) {for (vari = 0; I <files. length; I ++) {varfile = files [I]; varimagetype =/image. */; If (! File. type. match (imagetype) {continue;} varreader = newfilereader (); reader. onload = function (e) {displayimage({'bd'},e.tar get. result);} // convert the file to a URL. The image can be SRC reader. readasdataurl (File); // print the file name and type to the console. log (file. name + "|" + file. type) ;}} functionhandlefiles (Files) {for (vari = 0; I <files. length; I ++) {varfile = files [I]; varimagetype =/image. */; If (! File. type. match (imagetype) {continue;} varreader = newfilereader (); reader. onload = function (e) {displayimage({'bd'},e.tar get. result);} // convert the file to a URL. The image can be SRC reader. readasdataurl (File); // print the file name and type to the console. log (file. name + "|" + file. type );}}

We can use file. type to determine whether it is an image or not.

In addition, there is an image 12 on the right. The actual file name is 12.jpg. After the extension name is removed, the extension will be marked with typeized characters. a.jpg is actually an HTML webpage, and the result type is jpeg. The information of the class through file. type is untrusted.

Demo: http://www.qttc.net/static/demo/html5/drop.html