Chrome永远都是走在技术前线,总会有些惊人的表现,最近我在做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器拖拽图片。
普通拖拽事件,各个浏览器都识别从本地磁盘拖拽的文件
HTML5的拖拽drop事件让Web应用看到了两点,然而在普通的drop事件里,多数浏览器只支持从本机电脑磁盘上拖拽到浏览器,例如:
JavaScript代码
// 获取要触发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);
...