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

Other 2013-06-15 拖拽,drop,HTML5,chrome,图片

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

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

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

JS代码:

// 获取要触发drop事件的DIV
var du = $('dragUpload'); 

// 根据ID获取对像
function $(id){
	return document.getElementById(id);
}

// 把拖拽到网页上的图片显示到页面上
function displayImage(container,dataURL){
	var img = 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','');

	// 获取拖放文件 一个数组
	var files = 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属性就可以得知拖放的文件名,如:

function handleFiles(files){
	for (var i = 0; i < files.length; i++) {  
		var file = files[i];  
		var imageType = /image.*/;  
		  
		if (!file.type.match(imageType)) {  
			continue;  
		}  

		var reader = new FileReader();  
		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拓展名结尾的,我们如何得到这个文件的类型,获取它的真实拓展名呢?

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

function handleFiles(files){
	for (var i = 0; i < files.length; i++) {  
		var file = files[i];  
		var imageType = /image.*/;  
		  
		if (!file.type.match(imageType)) {  
			continue;  
		}  

		var reader = new FileReader();  
		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

文字链接:《Chrome可以从其它浏览器上拖拽图片

文章地址:http://www.qttc.net/201306339.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1

  • 真是好高端,google 的技术就是厉害。PS:评论表情在 FF 下,偏下了一些。PS2:因为主题升级,边栏的友文推荐功能暂时没了,正在抽时间重新做一下。
    2013-07-02 23:14:14 [ 跟帖 ]
    1 #