Chrome可以从其它浏览器上拖拽图片

chrome永远都是走在技术前线，总会有些惊人的表现，最近我在做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器上拖拽图片。

普通拖拽事件，各个浏览器都识别从本地磁盘拖拽的文件

HTML5的拖拽drop事件让web应用看到了两点，然而在普通的drop事件里，多数浏览器只支持从本机电脑磁盘上拖拽到浏览器，例如：

JS代码：

// 获取要触发drop事件的DIVvardu = $('dragUpload'); // 根据ID获取对像function$(id){    returndocument.getElementById(id);} // 把拖拽到网页上的图片显示到页面上functiondisplayImage(container,dataURL){    varimg = document.createElement('img');    img.src = dataURL;    container.appendChild(img);} // 拖放释放主要处理函数du.addEventListener("drop",function(e){    e.stopPropagation();     e.preventDefault();     du.className = du.className.replace('drag-over','');     // 获取拖放文件 一个数组    varfiles = e.dataTransfer.files;      handleFiles(files); },false);

界面效果：

我们从电脑磁盘拖拽一张图片到网页中

无论在FireFox，Chrome，Opera，IE下都一样使用，都可以从电脑上的任意位置拖拽一张图片到网页中。然而Chrome不仅可以从电脑磁盘上拖拽图片，甚至可以识别从其它浏览器中拖拽进来的图片。

Chrome支持从FireFox ，Safari 中拖拽进来的图片

从FireFox中拖拽一张图片到Chrome中：

惊奇吧！

测试结果：

从 IE 拖放至 Chrome 无效

从 Opera 拖放至 Chrome 无效

从 Safari 拖放至 Chrome 有效

从 FireFox 拖放至 Chrome 有效

从 任意浏览器 拖放至 非Chrome 无效

从 Chrome 拖放至 Chrome 无效

注意，虽然Chrome可以识别从别的浏览器拖放进来的图片，但不能识别从Chrome拖放进来的图片，如：

为了更方便看清楚，我们可以向控制台输出消息，正常情况下，我们通过获取每个拖放文件的name属性就可以得知拖放的文件名，如：

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.target.result);        }         // 把文件转换为url，图片可以src        reader.readAsDataURL(file);         // 把文件名打印出来        console.log(file.name);    } }

获取拖放文件名

然后我们再来拖放，看看file.name都是什么内容，首先从电脑磁盘上拖放

file.name就是文件名，包含拓展名。

从其它网页上向Chrome中拖放（因为从网页上拖放到其它浏览器中不能识别拖放文件，所以只能使用Chrome来测试）

From FireFox 文件名并不是在服务器上的真实文件名，而是类似临时的文件名。

From Safari 文件名就是图片在服务器上的真实文件名

如何识别拖拽的文件是不是图片？

刚才，我们看到从FireFox拖拽到Chrome中的图片文件名像是一临时文件名，但既然从FireFox拖拽进来的图片是bmp拓展名结尾的，我们如何得到这个文件的类型，获取它的真实拓展名呢？

首先，就要判断是不是图片类型

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.target.result);        }         // 把文件转换为url，图片可以src        reader.readAsDataURL(file);         // 把文件名与类型打印出来        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.target.result);        }         // 把文件转换为url，图片可以src        reader.readAsDataURL(file);         // 把文件名与类型打印出来        console.log(file.name + " | " + file.type );        } }

我们可以利用file.type来是不是图片，以及图片的类型

并且右侧 有一个图片 12，实际上文件名是 12.jpg，把拓展名去掉以后，就拖拽进来就被type识别不出来，而a.jpg实际上是一个html网页，结果type类型却是jpeg，看类通过file.type类型的信息不可信

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